Debug: React component renders too many times

React component re-renders excessively, causing performance issues. Difficult to identify what triggers the re-renders.

Debug and fix excessive re-renders:

1. Detect re-renders:

// React DevTools Profiler: Record and see render counts
// Or add a log:
function MyComponent(props) {
console.log('MyComponent rendered', props);
// ...
}
// Or use useRef counter:
const renderCount = useRef(0);
useEffect(() => { renderCount.current++; });

1. Common causes:

a) Parent re-renders (cascading):
Fix: React.memo() for pure components
const Child = React.memo(({ data }) => <div>{data}</div>);

b) New object/array in props every render:
// BAD: <Child style={{ color: 'red' }} />
// GOOD: const style = useMemo(() => ({ color: 'red' }), []);

c) Inline functions as props:
// BAD: <Child onClick={() => doThing(id)} />
// GOOD: const handleClick = useCallback(() => doThing(id), [id]);

d) Context changes:
// Split context into smaller ones
// Or use useMemo in the provider value

e) State updates in useEffect without proper deps:
// Check for missing or extra dependencies

1. Tools:

- React DevTools Profiler
- why-did-you-render library
- React.StrictMode (intentionally double-renders in dev)