Question 1

Why does my API fetch run twice when the component mounts?

Accepted Answer

This behavior is typically caused by React 18’s StrictMode in a development environment. StrictMode intentionally mounts, unmounts, and remounts components to stress-test effects and ensure they are resilient to real-world user navigation. If your effect lacks a proper cleanup function or isn't "idempotent," you will see duplicate calls. This serves as a diagnostic tool to warn you that your "bridge" to the outside world might be fragile.

Question 2

What is the "stale closure" problem in a dependency array?

Accepted Answer

A stale closure occurs when a `useEffect` hook uses a variable, such as a prop or state, but that variable is omitted from the dependency array. Because the effect only "sees" the version of the variable from the render in which it was created, it becomes stuck with an outdated "photograph" of that data. To prevent this, you should be honest with the "gatekeeper" (the dependency array) and include all variables the effect relies on, or use the ESLint "exhaustive-deps" rule to catch these omissions.

Question 3

How do I prevent race conditions when fetching data?

Accepted Answer

Race conditions happen when multiple asynchronous requests are fired in quick succession, and an older request finishes after a newer one, overwriting the UI with outdated data. To fix this, you should use a cleanup function to "cancel" the previous request. This can be done by using an `AbortController` to kill the fetch call or by setting a boolean flag (like `ignore = true`) in the cleanup function to ensure the component ignores the result of any request that is no longer relevant.

Question 4

When should I use a cleanup function in my effect?

Accepted Answer

You should use a cleanup function whenever your effect creates a resource or a connection to an external system that needs to be "undone" to avoid memory leaks or "zombie" updates. Common examples include clearing a `setInterval`, removing window event listeners, closing WebSocket connections, or aborting API fetches. The cleanup function runs not only when the component unmounts but also before every re-execution of the effect to ensure old connections are torn down before new ones are built.

Question 5

Why do objects and arrays sometimes cause infinite re-render loops?

Accepted Answer

React uses "shallow comparison" or referential equality to check if items in a dependency array have changed. Because objects and arrays are often re-created on every render, React sees them as "new" even if their internal content is identical. This triggers the effect, which might update state, causing a re-render and creating another new object, leading to an infinite loop. To avoid this, you can depend on primitive values (like strings or booleans) or use `useMemo` and `useCallback` to maintain a stable reference to the object or function.

How useEffect Syncs React with the Outside World

How This Personalized Podcast Was Made

More like this