Use an empty dependency array—useEffect(() => { /* setup */ }, [])—when the effect does not read props, state, or other reactive values declared in the component. That prevents reruns caused by changed dependencies, but it does not guarantee a single setup call in every environment: React Strict Mode runs an extra setup-and-cleanup cycle in development.
When an empty dependency array is correct
React determines an effect’s dependencies from the reactive values its setup code reads. Props, state, and variables or functions declared in the component are reactive values. Include each one the effect uses in the dependency array; React compares dependency values with Object.is.
For example, this effect depends on both the server URL and room ID, so an empty array would be incorrect:
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();
return () => connection.disconnect();
}, [serverUrl, roomId]);Use [] only when the setup code reads no reactive values from the component. Omitting the dependency argument entirely is different: the effect runs after every commit. React’s useEffect reference explains the dependency rules and behavior.
#1 Best Overall
What each dependency configuration does
| Configuration | Behavior | When to use it |
|---|---|---|
useEffect(setup) |
Runs after every commit. | When the effect genuinely needs to run after each commit. |
useEffect(setup, []) |
Runs after the initial commit and does not rerun because of changed dependencies. Strict Mode can still add a development-only setup-and-cleanup cycle. | When setup reads no reactive values from the component. |
useEffect(setup, [a, b]) |
Runs after the initial commit and after commits where a dependency differs. Before rerunning, React calls cleanup with the old values. | When setup reads reactive values such as props or state. |
Why it can run twice in development
When Strict Mode is enabled, React runs one extra development-only setup-and-cleanup cycle before the first real setup. This deliberate check helps reveal effects whose cleanup does not undo their setup. It does not mean the empty dependency array was ignored. See the React StrictMode reference.
Make the cleanup stop or undo the work started by setup: disconnect a connection, remove an event listener, or cancel work when appropriate. React calls cleanup before setting up again after dependencies change, and when the component is removed. A correct setup-cleanup pair should tolerate the Strict Mode cycle without leaving duplicate connections or other visible side effects.
Fix repeated effects without hiding dependencies
- Runs after every render: Check whether the dependency argument is missing. Without it, the effect runs after every commit.
- Runs repeatedly despite dependencies: Inspect object and function dependencies created during render. Their identities may change on each render, making React treat them as changed. Restructure the code to avoid unnecessary dependencies where possible.
- The effect reads props or state: Include those values in the dependency list. Do not suppress the Hooks linter simply to preserve
[]; that misrepresents what the effect uses and can cause bugs. React’s Removing Effect Dependencies guide discusses how to restructure effects safely. - Strict Mode causes duplicate external work: Correct the cleanup so it reverses the setup work rather than trying to block the second setup.
Check whether you need an effect at all
Effects are for synchronizing a component with an external system. If an effect is only handling ordinary application data flow and does not synchronize with something external, reconsider whether the effect is needed; React’s You Might Not Need an Effect guide covers alternatives.
Effects run only on the client, not during server rendering. An empty dependency array therefore does not make setup run on the server.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
