State and Data Flow

useState basics

const [count, setCount] = useState(0);
setCount(prev => prev + 1);

Lifting state up

When siblings depend on shared values, move state to their nearest common ancestor for consistency.

Derived state

Prefer computing derived values in render over storing duplicate state that can drift out of sync.

State smells

• Multiple sources of truth for one concept.
• Persisting transient UI state globally without clear need.

Professional tips

1. Model transitions explicitly with clear events.
2. Use immutable updates for predictable re-renders.
3. Switch to reducers when state updates become branching-heavy.

Practice

Implement a cart with quantity controls, totals, and a clear separation between local UI state and business data state.