react-hooks

Your React useEffect hook captures outdated state due to stale closures, occurring when inner functions reference variables from previous renders. Fixing stale closures requires correcting the dependency array to ensure effects re-run with current values.

To fix data not updating after a prop change in a React component, analyze the useEffect dependency array to ensure it includes all external references. Missing dependencies cause the effect to skip execution when props update.

Use useMemo and useCallback for React optimization when preventing expensive unnecessary re-renders of child components. These hooks memoize values and functions, but premature optimization introduces complexity and stale closure bugs if dependencies are mismanaged.

The best way to extract custom hooks from reusable React stateful logic is to identify repeated useEffect and useState patterns across components, then abstract them into a single function starting with 'use', ensuring all dependencies are correctly passed through.

A setInterval inside useEffect causes unexpected behavior when the cleanup function is missing or the dependency array is incorrect. Without a proper cleanup, intervals stack up across re-renders, leading to multiple simultaneous timers updating state unexpectedly.