SyntaxShelf

Dependency array

2 snippets in React

REReact

Dependency Array

RE · useEffect
Syntax
useEffect(effectFn, [dep1, dep2]);
// Empty array: mount only
useEffect(effectFn, []);
// No array: every render
useEffect(effectFn);
Example
function SearchResults({ query, page }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    // Runs whenever query or page changes
    let cancelled = false;

    async function search() {
      const data = await fetchResults(query, page);
      if (!cancelled) setResults(data);
    }
    search();

    return () => { cancelled = true; };
  }, [query, page]);

  return <ResultsList items={results} />;
}

Note React uses Object.is to compare dependencies. Objects and arrays create new references each render, so they will always trigger the effect. Extract primitive values or memoize objects before listing them as dependencies.

Dependency Arrays

RE · useMemo & useCallback
Syntax
// All values from component scope used inside must be listed
useCallback(() => fn(a, b), [a, b]);
useMemo(() => compute(x), [x]);
Example
function ChatRoom({ roomId, serverUrl }) {
  // Recreated only when roomId or serverUrl change
  const connect = useCallback(() => {
    const ws = new WebSocket(`${serverUrl}/rooms/${roomId}`);
    ws.onopen = () => console.log('Connected to', roomId);
    return ws;
  }, [roomId, serverUrl]);

  useEffect(() => {
    const ws = connect();
    return () => ws.close();
  }, [connect]);

  return <div>Chat: {roomId}</div>;
}

Note Missing a dependency leads to stale closures. Including an unnecessary one causes pointless recalculations. Use the exhaustive-deps lint rule (eslint-plugin-react-hooks) to catch mistakes automatically.

Frequently asked questions

How does React handle dependency array?
React covers this with 2 copy-ready snippets on this page. The "Dependency Array" snippet in React uses `useEffect(effectFn, [dep1, dep2]);`.
Which code does the React example use?
The "Dependency Array" snippet uses `useEffect(effectFn, [dep1, dep2]);`, from the useEffect section of the React cheat sheet.
What other React snippets are shown for "dependency array"?
Besides "Dependency Array", this page also shows "Dependency Arrays".
Is there anything to watch out for?
Yes. For "Dependency Array": React uses Object.is to compare dependencies. Objects and arrays create new references each render, so they will always trigger the effect. Extract primitive values or memoize objects before listing them as dependencies.

Browse all tasks by intent