React useState Hook: State Optimization Techniques

How useState Triggers Re-renders

useState returns a state variable and a setter function.

Calling the setter with a new value schedules a re-render.

React compares the new state with the previous one using Object.is to decide if re-render is needed.

• Primitive values trigger re-render only if changed.
• Objects and arrays trigger re-render if reference changes.
• Avoid mutating state directly to ensure React detects changes.

Using Functional Updates

When new state depends on previous state, use the functional form of the setter.

This prevents bugs caused by stale closures and ensures correct state updates.

• Syntax: setState(prevState => newState)
• Useful in asynchronous or event-driven updates.

Splitting State for Better Performance

Instead of one large state object, use multiple useState hooks for independent pieces of state.

This limits re-renders to only the parts of the component that depend on changed state.

• Improves readability and maintainability.
• Reduces unnecessary re-renders caused by unrelated state changes.

Example: Functional Update to Increment Counter

Using functional updates ensures the counter increments correctly even with rapid clicks.

Example: Splitting State for Form Inputs

Managing each form input with separate state hooks avoids re-rendering unrelated inputs.