Explain React useEffect code

What this React useEffect sample shows

when it runs

React runs the effect after the component is on screen, not while it renders. The first render showed Loading... and sent 1 request, to /api/users/1; when the reply came, the heading changed to Ana.

the dependency array

[userId] tells React to run the effect again only when userId changes: changing it from 1 to 2 sent a second request. With [], the effect ran once, so after the prop became 2 the page still showed Ana. With no array at all, it ran after every render. Each reply set the user, which rendered and ran the effect, and the effect's setUser(null) rendered and ran it once more: 5 replies led to 11 requests, and after the 5th the page showed Loading... again.

cleanup

The function the effect returns runs before the effect runs again, and when the component is removed. Here it calls controller.abort(): switching from user 1 to 2 aborted the request for 1, and so did removing the component before the reply. An aborted fetch rejects with an AbortError, which the catch ignores on purpose.

StrictMode

Inside <StrictMode>, React's development build ran the effect, its cleanup and then the effect again on the first render: 2 requests for user 1, the first one aborted, and the page still ended on Ana. React does this only in development, to show up effects that don't clean up after themselves.

Good to know

• Run with React 19.3.1 and react-dom 19.3.1 in jsdom 29.1.1 on Node 25.7.0, with a stand-in fetch whose replies were sent by hand, so the order they arrived in could be chosen.
• A 404 reply resolves the fetch like any other, so the res.ok check is what turns it into an error: the page showed Couldn't load: HTTP 404.
• setUser(null) and setError(null) at the start of the effect clear the last user's name or error. With user 1 loaded, switching to 2 showed Loading... once the effect ran, then Sam when 2 replied.

Watch out: Without the cleanup, a slow reply can overwrite a newer one. With the return () => controller.abort(); line taken out, the page switched from user 1 to 2, showed Sam when 2 replied, then went back to Ana when the late reply for 1 arrived. With the line in, request 1 was aborted and the page stayed on Sam.