"Maximum update depth exceeded."
Three causes, three fixes.

import { useState } from 'react';

// ─── BAD: setState in render ─────────────────
function BadCounter() {
const [count, setCount] = useState(0);

setCount(count + 1);
// ⚠️ Maximum update depth exceeded
// Render → setState → re-render → setState → ...

return 
{count}
;
}

// ─── GOOD: setState in an event handler ──────
function GoodCounter() {
const [count, setCount] = useState(0);

function increment() {
setCount(c => c + 1); // ✅ called from a click
}

return Count: {count};
}

// ─── GOOD: derived value, no state ───────────
function DerivedExample() {
const [count, setCount] = useState(0);

// If a value is derived, compute it in render.
// Don't store it in state — that causes the loop.
const doubled = count * 2; // ✅ derived, no loop

return (

Count: {count}, Doubled: {doubled}
 setCount(c => c + 1)}>+1

);
}

// ─── BAD variant: setState inside .map() ─────
function BadItems({ items }: { items: string[] }) {
const [valid, setValid] = useState<string[]>([]);

items.forEach(item => {
if (item.length > 0) {
setValid(v => [...v, item]); // ⚠️ setState during render
}
});

return 
{valid.map(v => 
{v}
)}
;
}

// ─── GOOD: compute during render ─────────────
function GoodItems({ items }: { items: string[] }) {
// ✅ Filter during render — no state, no loop
const valid = items.filter(item => item.length > 0);

return 
{valid.map(v => 
{v}
)}
;
}

console.log(BadCounter, GoodCounter, DerivedExample, BadItems, GoodItems);

import { useState, useEffect, useCallback, useMemo } from 'react';

// ─── BAD: object dep causes loop ─────────────
function BadObjectDep() {
const [data, setData] = useState(0);
const options = { retries: 3 }; // new object every render

useEffect(() => {
setData(d => d + 1);
}, [options]);
// ⚠️ Effect runs every render (options changed)
// Effect calls setData → renders again → options changes → loop

return 
{data}
;
}

// ─── GOOD: useMemo stabilizes object ─────────
function GoodObjectDep() {
const [data, setData] = useState(0);
const options = useMemo(() => ({ retries: 3 }), []); // ✅ stable

useEffect(() => {
setData(d => d + 1);
}, [options]);
// ✅ Effect runs once (options stable)
// Effect calls setData → renders again → options unchanged → no loop

return 
{data}
;
}

// ─── BAD: function dep causes loop ───────────
function BadFunctionDep() {
const [data, setData] = useState(0);
const fetchData = () => {
setData(d => d + 1);
};

useEffect(() => {
fetchData();
}, [fetchData]);
// ⚠️ Loop — fetchData is new on every render

return 
{data}
;
}

// ─── GOOD: useCallback stabilizes function ───
function GoodFunctionDep() {
const [data, setData] = useState(0);

const fetchData = useCallback(() => {
setData(d => d + 1);
}, []); // ✅ stable

useEffect(() => {
fetchData();
}, [fetchData]);
// ✅ Effect runs once

return 
{data}
;
}

// ─── GOOD: inline the function instead ───────
function InlineFix() {
const [data, setData] = useState(0);

useEffect(() => {
// No external function, no dependency
setData(d => d + 1);
}, []); // ✅ runs once on mount

return 
{data}
;
}

console.log(BadObjectDep, GoodObjectDep, BadFunctionDep, GoodFunctionDep, InlineFix);

import { useState, useEffect, useRef } from 'react';

// ─── BAD: effect depends on state it sets ────
function BadSelfDep() {
const [items, setItems] = useState<string[]>([]);

useEffect(() => {
// Reads items, sets items — infinite loop
setItems(prev => [...prev, 'new item']);
}, [items]);
// ⚠️ Maximum update depth exceeded

return 
{items.map(i => 
{i}
)}
;
}

// ─── GOOD 1: derive, don't store ─────────────
function DerivedFix({ source }: { source: string[] }) {
// No state needed — the "derived" list IS source
return 
{source.map(i => 
{i}
)}
;
}

// ─── GOOD 2: functional setState + guard ─────
function GuardedFix() {
const [items, setItems] = useState<string[]>([]);

useEffect(() => {
if (items.length >= 3) return; // stop at 3
const timer = setTimeout(() => {
setItems(prev => [...prev, item-${prev.length}`]);
}, 1000);
return () => clearTimeout(timer);
}, [items]); // ✅ guard prevents infinite loop

return 
{items.map(i => 
{i}
)}
;
}

// ─── GOOD 3: use a ref to track "latest" ─────
function RefFix({ value }: { value: number }) {
const [history, setHistory] = useState<number[]>([]);
const lastValue = useRef(value);

useEffect(() => {
// Only record when value actually changed
if (lastValue.current !== value) {
lastValue.current = value;
setHistory(h => [...h, value]);
}
}, [value]); // ✅ depends on prop, guards with ref

return 
History: {history.join(', ')}
;
}

// ─── GOOD 4: run once, use setInterval ───────
function IntervalFix() {
const [count, setCount] = useState(0);

useEffect(() => {
const id = setInterval(() => {
setCount(c => c + 1); // functional — no count dep
}, 1000);
return () => clearInterval(id);
}, []); // ✅ runs once on mount

return 
{count}
;
}

console.log(BadSelfDep, DerivedFix, GuardedFix, RefFix, IntervalFix);