local-vs-global-state

What problem does it solve?

Deciding whether to use local state (useState), lifted state, or global state (Context) is crucial for application performance, maintainability, and avoiding prop drilling. This Skill guides you to the optimal strategy.

Core Features & Use Cases

• Local State (useState): Best for state needed only within a single component or its direct children, or for frequently changing UI-specific state.
• Lifted State: Ideal when two sibling components need to share state, managed by their common parent.
• Context API (use()): Use for global configuration (theme, auth), or when many components at different nesting levels need the same state, avoiding deep prop drilling.
• Anti-Patterns: Identifies and helps avoid common mistakes like using Context for frequently changing state, which can cause unnecessary re-renders.
• Use Case: Analyze the ThemeSwitcher component and its usage across the application to determine if theme state should be local, lifted, or managed via Context, optimizing for performance and ease of access.

Quick Start

Analyze the src/components/UserProfile.js component and determine if the user's profile data should be managed with local state or Context.