Question 1

Why does my API call run twice or three times on mount?

Accepted Answer

This behavior is often a result of React 18’s Strict Mode in development, which intentionally runs effects twice to stress-test your cleanup logic. If your effect doesn't have a proper cleanup function, these multiple executions can lead to bugs. It can also happen if you omit the dependency array entirely, causing the effect to fire after every single render, or if you have an "infinite loop" where the effect updates a state variable that it also lists as a dependency.

Question 2

What is the "stale closure" trap in useEffect?

Accepted Answer

A stale closure occurs when you use an empty dependency array but your effect code relies on props or state variables. Because the empty array tells React to only run the effect once on mount, the effect "captures" the initial values of those variables and never updates them. Even if the component re-renders with new data, the effect remains frozen with the values from the very first render, like a photograph of a moving object.

Question 3

How do I prevent infinite loops when updating state inside an effect?

Accepted Answer

To avoid an infinite loop, you should use the functional update pattern for state setters, such as `setCount(prev => prev + 1)`. This allows you to update the state based on its previous value without actually reading the state variable itself within the effect's scope. By doing this, you can remove the state variable from the dependency array, breaking the feedback loop where the effect triggers a state change that then re-triggers the effect.

Question 4

Why should I stop thinking about useEffect in terms of component lifecycles?

Accepted Answer

Class-based lifecycles like `componentDidMount` focus on "time" (when a component is born or dies), whereas `useEffect` is designed for "synchronization." If you only think about the mount phase, you might miss necessary updates when props change. For example, in a chat component, you don't just want to connect when the component appears; you want to stay synchronized with the specific room ID. If the ID changes, `useEffect` automatically cleans up the old connection and starts a new one to ensure the external system matches the current UI state.

Question 5

How can I properly clean up a fetch request to avoid race conditions?

Accepted Answer

The recommended way to clean up a fetch request is by using an `AbortController`. You create the controller inside the effect and pass its signal to the fetch call. In the cleanup function (the return statement of the hook), you call `controller.abort()`. This ensures that if the component unmounts or the dependencies change before the request finishes, the browser ignores the old result, preventing "zombie" data from overwriting the most recent request.

Mastering useEffect: Syncing React with the Outside World

How This Personalized Podcast Was Made

More like this