Error: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

Error: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

En komponent fastnar i en oändlig renderingsloop, vanligtvis på grund av ett `useEffect` utan korrekt dependency array.

Förklaring

React renderar en komponent, kör dess effekter, och om en effekt uppdaterar state renderas komponenten om. Om den nya renderingen triggar samma effekt igen uppstår en oändlig loop. React avbryter efter ett visst antal iterationer och kastar det här felet.

Det vanligaste mönstret är ett useEffect utan dependency array som anropar en state-setter. Det räcker också med en dependency som är ett objekt eller array skapat inline. {} och [] är aldrig referensmässigt lika med sig själva, så [options] triggar effekten varje rendering trots att värdena är identiska.

Vanliga orsaker

useEffect utan dependency array som anropar en state-setter. En dependency som är ett objekt eller array skapat inline i render. Cirkulärt state-beroende: en effekt uppdaterar state som triggar en annan effekt som uppdaterar tillbaka.

Lösning

Kontrollera att dependency arrayen är korrekt och att dess värden är stabila:

// Fel — körs efter varje rendering
useEffect(() => {
  setCount(c => c + 1);
});

// Fel — options är ett nytt objekt vid varje rendering
const options = { threshold: 0.5 };
useEffect(() => {
  observer.observe(ref.current, options);
}, [options]);

// Rätt — stabiliserat med useMemo
const options = useMemo(() => ({ threshold: 0.5 }), []);
useEffect(() => {
  observer.observe(ref.current, options);
}, [options]);

Flytta objekt och arrayer som är konstanta utanför komponenten, eller stabilisera dem med useMemo och useCallback.