How to properly Populate a Dropdown with SQL Query Values in React.Js Hook

Question

I have a react component called Sidebar.jsx. Within it, I am making an API call to get a array of fleets to populate an eventual JSX dropdown element within my Sidebar. This results in a simple JSON array.

I have imported a function called getFleets() from my services folder to make the API call. The service uses the fetch API to make a query call to my backend and looks like this:

export async function getFleets() {
    const resp = await fetch("http://localhost:5000/fleets", {
        method: 'GET',
        headers: {},
        mode: 'cors'
    });
    return resp.json();
};

However, when I use the website, it appears to infinitely make the API call. This is my first time trying to make an API call within a react component so I am a bit confused here. Other guides I've read online seem to be similar but I am obviously missing something.

What can I do to make this API call only once and retrieve my JSON array such that I can later use it to populate the options in my return ?

Sidebar.jsx

import React, { useEffect, useState } from "react";
import { getFleets } from "../services/FleetService";

const Sidebar = () => {
  const [data, setData] = useState([]);

  useEffect(() => {

    const setFleets = async () => {
        const fleets = await getFleets();
        console.log(fleets);
        setData(fleets);
      }
    setFleets();
  }, [data]);


  return (
    <>
    // Add data to <select> </select>
  );
};

There are multiple libraries out there that accomplish async-selects. You might want to check them out if you don't require a custom implementation. for example: react-bootstrap-typeahead, react-select, ... — Wojtek322
– Wojtek322, Commented Jun 1, 2022 at 14:39

Andrei · Accepted Answer · 2022-06-01 14:35:50Z

1

The way your code works, since data is part of the dependency array sent to useEffect, every time data changes the effect runs, which changes data, which runs the effect again ...resulting in the infinite loop.

The simple fix is to remove data from the dependency array, and explicitly specifying an empty array [] as the second parameter of useEffect. This will make the effect run only exactly once, when the component is first rendered.

You need to explicitly specify an empty array because when the second parameter isn't specified at all, the effect will run on every render, bringing back the infinite loop issue.

answered Jun 1, 2022 at 14:35

Andrei

1,8832 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Coldchain9 Over a year ago

Thanks for this. It definitely fixed the issue. I am still a little confused on why I am getting multiple console.log() results when I refresh my webpage. I don't understand why it is rendering multiple times. Maybe I don't quite understand what useState([]); is doing along with setData()?

Andrei Over a year ago

There should only be a single console.log call if the useEffect(YOUR_FUNCTION, []) call is done with [] as the second parameter, that shouldn't be the cause of the behavior you're describing. It's fine the way you're calling useState (with an empty array as the initial value). Maybe you have something like hot reloading enabled during development and that what's causing your component to get rendered multiple times (and therefore causing the effect to run multiple times)? Or maybe console.log is called in multiple places? (like inside of getFleets).

Collectives™ on Stack Overflow

How to properly Populate a Dropdown with SQL Query Values in React.Js Hook

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related