Dependency array
A dependency array is an array passed to a React effect or memoization Hook that specifies values whose changes trigger recomputation or rerunning.
React Hooks in Action: With Suspense and Concurrent Mode
A dependency array is an array passed to useEffect that determines when the effect is run again based on dependency changes.
- How it is used
- Controls when useEffect side effects run as components render, rerender, mount, and unmount.
- How deep it goes
- Explains comparison-driven scheduling, empty and populated arrays, cleanup order, and warnings, without descending into React internals.
- Examples
- Uses window resizing, local-storage user selection, user fetching, and bookables loading to demonstrate dependency choices.
- What you can do after
- Apply dependency arrays to schedule effects, persist state, fetch initial data, and prevent repeated event-listener registration.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains dependency array →
React in Depth
A dependency array is the optional second argument to a React effect or memoization hook that determines when its computation is rerun.
- How it is used
- Controls effect reruns and memoized computations while balancing correct updates against unnecessary work.
- How deep it goes
- Distinguishes omitted, empty, and nonempty arrays; explains referential equality, stable-value exceptions, and maintenance pitfalls.
- Examples
- Uses employee-list filtering, render tracking, and a deletion callback with a stable state setter.
- What you can do after
- Apply it in React hooks to select rerun conditions and diagnose missing or needlessly changing dependencies.
React Quickly, Second Edition
A dependency array is an array passed to a React effect Hook that specifies values whose changes determine when the effect runs again.
- How it is used
- Controls when React effects and their cleanup functions respond to component mounts, renders, unmounts, and selected value changes.
- How deep it goes
- Explains skipped, empty, and value-based arrays with lifecycle examples, but defers detailed implementation internals.
- Examples
- Uses data loading, timers, dialog-close tracking, browser titles, active flags, and unmount cleanup.
- What you can do after
- Apply it via React's useEffect hook to schedule effects and cleanup at selected component lifecycle points.
Read how React Quickly, Second Edition explains dependency array →
Related concepts
- useEffectconfigures · useEffect is a React Hook that runs effect logic after rendering to synchronize a component with external systems and optionally perform cleanup.
- useMemoused by · useMemo is a React Hook that caches a calculated value between renders and recomputes it when specified dependencies change.
- React renderingcontrasts with · React rendering is the process by which React evaluates components and produces their user-interface output.
- useLayoutEffectuses · useLayoutEffect is a React Hook that runs an effect synchronously after DOM mutations and before the browser paints.
- useCallbackuses · useCallback is a React Hook that memoizes a function reference and reuses it across renders until its specified dependencies change.
- stable valueused by · A stable value is a value whose identity remains unchanged across renders of a component.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.