Control useMemo recalculation
Memoizing an expensive calculation
React 19+ · Type Alias
DependencyList
DependencyList is the fixed-length array of reactive values used by React hooks such as useMemo, useEffect, and useCallback. React compares each entry with its previous value using Object.is to decide whether dependent work should run again.
How it works
React uses a dependency list to determine whether a hook's calculation or Effect should run again. It must contain every reactive value referenced by the hook code, have a constant number of items, be written inline, and is compared with the previous list using Object.is.
Syntax
type DependencyList = readonly unknown[]Parameters
| Name | Type | Description |
|---|---|---|
dependencies | DependencyList | The fixed-length array of every reactive value referenced by the hook's calculation or setup code. |
Returns
A dependency list is an input array used by React hooks to determine whether work should be repeated; DependencyList itself has no runtime return value.
Key points
- DependencyList contains the reactive inputs used by a hook calculation.
- Props, state, and component-local declarations are reactive values when referenced by the hook.
- Use a fixed-size array literal rather than generating dependencies dynamically.
- React checks each entry against its previous value with Object.is.
- For useMemo, dependencies control when the cached calculation is reused or recomputed.
Common mistakes
- Do not construct the list dynamically or change its length between renders.
- A dependency is considered changed according to Object.is comparison, not deep equality.
Example: Using a dependency list with useMemo
import { useMemo } from 'react';
type DependencyList = readonly unknown[];
export default function Total({ items }: { items: number[] }) {
const total = useMemo(
() => items.reduce((sum, item) => sum + item, 0),
[items]
);
return <output>{total}</output>;
}A dependency list is an inline, fixed-length array containing every reactive value used by the calculation.
When to use it
Control useEffect re-synchronization
Synchronizing with an external system
Control useCallback updates
Caching a callback
Related
useEffectuseMemouseCallbackexhaustive-deps