useEffect

Q: How deeply does React Hooks in Action: With Suspense and Concurrent Mode cover useEffect?

Explains effect timing, dependency comparison, cleanup order, rendering sequences, and fetch-on-render, without descending into React implementation internals.

As explained in React Hooks in Action: With Suspense and Concurrent Mode

The useEffect Hook is a React API function for declaring and managing side effects in function components.

useEffect lets function components deliberately perform work outside React’s normal state-to-UI transformation. Typical effects update the document title, read browser dimensions, access local storage, fetch data, or subscribe to services; React runs them after rendering. section 1.1.3 section 4.4

Choose the call pattern according to when the effect should run:

Omit the second argument to run the effect after every render. section 4.1.1 section 4.1.5
Pass an empty dependency array to run the effect once when the component mounts. section 4.1.2
Pass dependencies to rerun the effect when a listed value changes; include the values the effect uses. section 4.1.4 section 4.4
Return a cleanup function to remove listeners, cancel ongoing work, or undo other long-running effects before reruns and on unmount. section 4.1.3 section 4.1.5
Keep separate side effects in separate useEffect calls so their dependencies and cleanup remain understandable. section 4.4

Tracking browser-window size

A window-size component reads the initial dimensions, registers a resize listener in an effect with [], updates state from the handler, and returns a cleanup function that removes the listener. Each resize triggers a render with the new width and height. section 4.1.2 section 4.1.3

Persisting a selected user

A user picker uses one effect with [] to restore a saved user from local storage and another with [user] to save changes. The dependency lists separate initialization from persistence. section 4.1.4

Fetching users after the first render

A UserPicker starts with users set to null, renders a Spinner, fetches JSON inside a mount-only effect, stores the result with setUsers, and then renders the options. Effects run after the initial loading UI appears. section 4.2.3

Table 4.1 The various use cases for the `useEffect` hook (view table figure)

Call pattern	Code pattern	Execution pattern
No second argument	`useEffect(() => {` // perform effect });	Run after every render.
Empty array as second argument	`useEffect(() => {` // perform effect }, []);	Run once, when the component mounts.
Dependency array as second argument	`useEffect(() => {` // perform effect // that uses dep1 and dep2 }, [dep1, dep2]);	Run whenever a value in the dependency array changes.
Return a function	`useEffect(() => {` // perform effect return () => {/* clean-up */}; }, [dep1, dep2]);	React will run the cleanup function when the component unmounts and before rerunning the effect.

Use the execution table to compare no dependencies, an empty array, changed dependencies, and returned cleanup functions. section 4.1.5

How React Hooks in Action: With Suspense and Concurrent Mode covers it

Cover of React Hooks in Action: With Suspense and Concurrent Mode

liveBook manning.com

Read React Hooks in Action: With Suspense and Concurrent Mode on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

React Quickly, Second EditionuseEffect is a React Hook for synchronizing a component with external systems after rendering and browser painting.
liveBook manning.com

D3.js in Action, Third EditionuseEffect() is a React Hook that runs a side-effect function after rendering and can rerun it when specified dependencies change.
liveBook manning.com

React in DepthuseEffect is a React hook that synchronizes a component with external systems by running an effect after rendering when its dependencies change.

Compare how 4 books explain useEffect →

Related concepts

side effectuses · A software side effect is an observable change or interaction caused by an operation beyond producing its direct result, such as modifying state or performing input or output.
Reactuses · React is an open-source JavaScript library for building user interfaces from declarative, reusable components.
resource cleanupproduces · Resource cleanup is the release of resources or restoration of state when an operation or scope ends or fails.
dependency arrayconfigured by · A dependency array is an array passed to a React effect or memoization Hook that specifies values whose changes trigger recomputation or rerunning.
useLayoutEffectalternative to · useLayoutEffect is a React Hook that runs an effect synchronously after DOM mutations and before the browser paints.

This explainer was generated by Manning's knowledge graph from the text of React Hooks in Action: With Suspense and Concurrent Mode. The section links point to the parts of the book it draws on.