Setting state in React useEffect hook

Question

In my app I fetch data from my API after a button is clicked that changes the state of endpoint. Until the data is fetched I want to display a loading icon. After MUCH testing, I finally got it to work. This is what it looks like:

  const [endpoint, setEndpoint] = useState('products');
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    setLoading(true);

    fetch(`/api/${endpoint}`, {
      method: 'GET',
    })
    .then(res => res.json())
    .then(data => {
      setData(data);
    })
    .catch(e => {
      setData([]);
    })
    .finally(() => setLoading(false));

  }, [endpoint]);

  const onSelect = (option) => {
    setEndpoint(option);
  }

  return (
    <>
      <Sidebar onSelect={onSelect}/>
      <div className="main">
        <Banner />
        {loading ? 'Loading...' : JSON.stringify(data)}
      </div>
    </>
  );

Even though I get the result that I want, I'm a bit confused as to how it all fits together because I'm new to React. Please correct me If I'm wrong, but this is my understanding:

setEndpoint triggers a re-render, which causes useEffect to execute because it has a dependency on endpoint. Each set state call inside useEffect also causes a re-render. For instance when setLoading(true) is called, the screen is re-rendered to show 'Loading...'. Once the state of loading is set to true, fetch gets called. As soon as the promise is resolved, setData(data) causes another re-render. However, my data isn't displayed on screen until setLoading(false) is called, re-rendering the screen yet again, displaying my data. So in total, the screen is re-rendered 3 times (right?).

I'm still confused because I was under the impression that hooks like useEffect are asynchronous so why would it wait for the state to be set before continuing to execute the next lines of code?

It may re-render that many times; state updates can be batched. There's no "once the state of loading is set to true"; the code will continue immediately after the call to setState. setState is asynchronous (not in the sense it's awaitable). Your data isn't displayed until loading is false because that's what you told it to do. — Dave Newton
– Dave Newton, Commented May 13, 2022 at 23:07
Then, are set state calls queued and eventually executed in that order? Maybe I need to brush up on how the js engine works — Kartashuvit
– Kartashuvit, Commented May 13, 2022 at 23:18
setData(data) and setLoading(false) happen right after one another so they probably get batched together. — user5734311
– user5734311, Commented May 13, 2022 at 23:22
They can be batched, e.g., two setStates in a row may be a single state update. This is not a JS engine thing, but React. — Dave Newton
– Dave Newton, Commented May 13, 2022 at 23:27

Drew Reese · Accepted Answer · 2022-05-13 23:27:58Z

The useEffect hook callback is completely synchronous. What you are seeing is the asynchronous Promise chain at work.

useEffect(() => {
  setLoading(true); // (3)

  fetch(`/api/${endpoint}`, { // (4)
    method: 'GET',
  })
    .then(res => res.json())
    .then(data => {
      setData(data); // (6)
    })
    .catch(e => {
      setData([]); // (6)
    })
    .finally(() => setLoading(false)); // (7)
}, [endpoint]); // (2)

const onSelect = (option) => {
  setEndpoint(option); // (1)
}

...

{loading ? 'Loading...' : JSON.stringify(data)} // (5), (8)

What you explain as your understanding is largely correct.

An endpoint state update is enqueued the callback function completes and the state updates is processed, triggering a rerender.
The useEffect hook is called, its dependencies checked. Since endpoint value updated, the useEffect callback is invoked.
A loading state update is enqueued. The callback function is still running.
A fetch request is made. fetch returns a Promise, and the code starts a Promise chain. This chain is asynchronous. The useEffect hook callback now completes and since there is no more synchronous code to run. The loading state update is processed and a rerender is triggered.
The UI conditionally renders the loading indicator.
Here the Promise chain has either resolved or rejected, a data state update is enqueued and a Promise returned in the chain. The data state update is processed and a rerender triggered.
The end of the Promise chain, a loading state update is enqueued. The loading state is processed and a rerender is triggered.
The UI now conditionally renders the data.

So in total, the screen is re-rendered 3 times (right?).

By my count the logic above likely triggered 4 rerenders, but React could have potentially rerendered any number of times for just about any other reason. React components rerender when either state or props update, or the parent component rerenders.

Collectives™ on Stack Overflow

Setting state in React useEffect hook

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related