local-vs-global-state

Use local state (useState) for UI-specific state needed only within a single component or its direct children. Use global state (Context) for configuration like theme, auth, or locale that many deeply nested components need, avoiding prop drilling. Lift state to a parent when sibling components share concerns.

Avoid prop drilling by lifting shared state to a common parent component, or use Context API with the use() hook to make state accessible across your component tree without passing props through intermediate components.

Lifted state passes data through a parent to sibling components and works best for nearby components. Context API distributes state across distant or deeply nested components without passing props through every level, ideal for global configuration.

Context triggers re-renders of all consuming components when state updates, even if they only use part of it. Frequently changing state causes excessive re-renders and performance degradation; use useState locally or a specialized state management library instead.

Apply a decision flow: use useState for single-component or direct-child state; lift state when siblings share concerns; use Context for global configuration, theme, auth, or cross-cutting state across deep trees. Avoid Context for rapidly changing state.

Yes. React 19's use() hook enables Context consumption in components. Use Context with use() for infrequent updates to global configuration; avoid it for frequently changing state to minimize unnecessary component re-renders.