React useState Hook: Optimizing State Performance

Functional Updates to Avoid Stale State

When updating state based on the previous state, use the functional form of the setter.

This ensures the update uses the latest state value, preventing bugs and unnecessary renders.

• Incorrect: setCount(count + 1) may use stale count value.
• Correct: setCount(prevCount => prevCount + 1) always uses the latest state.

Lazy Initialization of State

Passing a function to useState delays the computation of the initial state until the component mounts.

This avoids expensive calculations on every render.

• Example: useState(() => expensiveComputation())
• The function runs only once during initial render.

Avoiding Derived State

Storing derived data in state can cause inconsistencies and extra renders.

Instead, compute derived values during rendering or useMemo when necessary.

• Derived state example: filtering a list based on props or other state.
• Better to compute filtered list inside the component render or memoize it.

Basic Counter with Potential Performance Issues

This example increments count twice in a row but calls setCount twice separately, causing two re-renders.

Optimized Counter Using Functional Updates and Batching

Using functional updates and batching the increments into one update reduces re-renders.