useState

Source: https://react.dev/reference/react/useState

Purpose

useState adds local state to function components. It returns a state value and a setter function that triggers re-render. React 18+ automatically batches multiple state updates within event handlers into a single re-render.

When to Use

• Any value that changes over time and drives rendering (form inputs, toggles, counters, UI state)
• Values that can't be computed from props or other state — prefer derived values in render if possible
• Use lazy initializer (useState(fn)) when the initial value is expensive to compute
• Use updater function (setState(prev => next)) when the new state depends on the previous value, especially for batched updates
• Prefer useReducer when state logic is complex, involves multiple sub-values, or when next state depends on multiple previous state fields

Basic Usage