Common React Bugs and How to Fix Them

The most common React bug: your component renders, updates state, which triggers a re-render, which updates state again, forever. This usually happens when you update state inside useEffect without proper dependencies, or when you create new object references on every render that trigger child component re-renders. Fix: ensure useEffect dependencies are correct, use useMemo for computed values, and avoid setting state unconditionally during render.

Your event handler or setTimeout uses an old value because it 'closed over' a previous render's state. Classic symptom: clicking a button rapidly shows the wrong count, or an interval always uses the initial value. Fix: use the functional form of setState (setCount(prev => prev + 1)) or useRef for values that need to be current without triggering re-renders.

In Next.js and other SSR frameworks, the HTML rendered on the server must match what React renders on the client. Common causes: using Date.now() or Math.random() during render, checking window or localStorage during initial render, or rendering different content based on authentication state that's only available client-side. Fix: use useEffect for client-only logic, and Suspense boundaries for auth-dependent content.

useEffect without a dependency array runs on every render — usually not what you want. An empty array [] runs only once on mount. A filled array [userId] runs when that value changes. Missing dependencies cause stale data; extra dependencies cause unnecessary re-runs. The ESLint exhaustive-deps rule catches these automatically.

When rendering lists, React uses the key prop to track which items changed. Using array index as the key causes bugs when items are reordered, added, or removed — React reuses the wrong component state. Always use a stable, unique identifier (database ID, slug) as the key.