Common React Mistakes

Top React Mistakes

State mutation, missing effect dependencies, incorrect hook usage, and unstable keys cause the majority of beginner-to-intermediate React bugs.

React's dev warnings and Strict Mode exist to surface many of these — don't ignore yellow boxes.

// Mistake: missing dependency
useEffect(() => { fetch(userId); }, []); // stale userId

// Fix:
useEffect(() => { fetch(userId); }, [userId]);

Exhaustive-deps ESLint rule catches missing dependencies.

Mistake Categories

State      → mutation, stale closure
Effects    → missing deps, infinite loops
Lists      → index keys, missing keys
Hooks      → conditional calls
Forms      → controlled/uncontrolled mix

• Read error messages — React warnings are usually accurate.
• Strict Mode double effects expose missing cleanup.
• DevTools Components tab shows unexpected re-renders.
• Compare with official docs when patterns feel wrong.

Mistake → Fix Quick Reference

Fast lookup for common bugs.

Stale Closure Deep Dive

Event handler or effect capturing old state — fix with functional updates, refs for latest value, or correct dependency arrays.

// Fix with ref for latest callback in effect
const onEventRef = useRef(onEvent);
onEventRef.current = onEvent;

Effect Infinite Loops

Effect sets state → re-render → effect runs again. Fix dependencies, move logic to event handler, or compare before setState.

Common Mistakes

• Ironically repeating these mistakes while reading about them — slow down on deps and keys.
• Disabling ESLint rules instead of fixing root cause.
• Assuming bugs are React's fault before checking app logic.
• Not using TypeScript to catch null/undefined prop errors.

Key Takeaways

• Mutation, stale closures, and effect deps cause most bugs.
• Keys must be stable for dynamic lists.
• Follow rules of hooks without exception.
• Use ESLint, Strict Mode, and TypeScript as safety nets.