react-debugging

Infinite render loops occur when dependencies in useEffect or callbacks change on every render. Fix them by stabilizing dependencies—use useMemo for derived values, useCallback for functions, and ensure refs or stable objects aren't recreated. The React Profiler shows which component rerenders excessively.

'Maximum update depth exceeded' happens when state updates trigger rerenders that create new dependencies, causing useEffect to run again. Prevent this by memoizing callbacks with useCallback, stabilizing array dependencies with useMemo, and avoiding inline object or function creation in dependency arrays.

useCallback and useMemo prevent rerenders only when dependencies stay stable. Common pitfalls include adding unstable dependencies, memoizing unnecessarily, or recreating memoized values. Wrap derived data and callbacks in these hooks only when they're passed to child components or used in dependency arrays.

State resets when a parent rerenders because child components remount. Use refs to persist values across rerenders, or lift stable state higher. For URL parameters, apply hydrate-once patterns to prevent state changes during hydration that trigger unnecessary updates.

Use the React Profiler when you observe unexpected rerenders, slow page loads, or when components render more times than expected. It visualizes render duration and frequency, helping identify which components cause bottlenecks and whether dependency changes trigger cascading updates.