React State Patterns

React global state is needed when data is accessed by many unrelated components, whereas local state suffices for isolated UI elements. This Skill helps you decide by providing a decision tree based on state scope and component hierarchy to prevent prop drilling and unnecessary re-renders.

Avoid prop drilling in React by lifting state to a common ancestor, using the Context API, or adopting a global state manager like Zustand. This Skill demonstrates these state management patterns and illustrates deriving local aliases to pass data efficiently.

Choose useState for simple local values, useReducer for complex state logic, and Zustand for global state shared across distant components. This Skill guides you to the most appropriate React state management solution based on your specific scope and requirements.

Common React state anti-patterns include excessive prop drilling, unnecessary global state, and causing avoidable re-renders. This Skill identifies these mistakes and highlights security considerations for safe state handling within your React application architecture.

Using the URL as a state source in React allows you to synchronize state with browser history for shareable links. This Skill demonstrates this pattern alongside other common state management techniques like lifting state and deriving local aliases.

The Context API works well for low-frequency global state updates in React but can cause unnecessary re-renders if used for high-frequency changes. This Skill helps evaluate whether the Context API or a dedicated state manager like Zustand fits your requirements.