React useDeepCompareEffect: Fix useEffect Object Dependencies (2026)

You wire up a fetch. The endpoint takes a query object, so you pass it in the dependency array. The effect fires, sets state, the component re-renders, the query object is rebuilt — a brand-new object with identical contents — and the effect fires again. You have written an infinite loop, and React thinks it did exactly what you asked.

function Results({ term, page }: Props) {

const [rows, setRows] = useState([]);

const query = { term, page, sort: 'desc' }; // new object, every render

React useDeepCompareEffect: Fix useEffect Object Dependencies (2026)

Related reading

Stop Fighting Referential Instability: Solving React Re-Renders with useDeepMemo

Stop Using `useEffect` for Data Fetching—Please, I Beg You

Cómo solucionar el bucle infinito en useEffect con objetos y arrays

Part 3: Stop Syncing Props Into State (you probably don't need that useEffect)

Cómo solucionar el bucle infinito en `useEffect` con objetos y arrays

Part 1: Why I Rarely Use useEffect Anymore (and what I use instead)