react-state-management
Implement React State Management
Managing state across React components can lead to complex code and inconsistent data. This skill provides comprehensive patterns for Redux Toolkit, Zustand, Jotai, and React Query to handle local, global, and server state efficiently.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "react-state-management". What state management library should I use for a small app with simple global state needs?
Resultado esperado:
For small applications with simple global state, Zustand or Jotai are excellent choices:
**Zustand** offers the simplest API with minimal boilerplate:
- Create stores with a single hook-like function
- Built-in devtools and persistence middleware
- No providers required
- Selective subscriptions prevent unnecessary re-renders
**Jotai** excels when you want atomic, granular updates:
- Each piece of state is an independent atom
- Derived atoms compute from other atoms automatically
- Perfect for fine-grained reactivity
Choose Zustand if you prefer a unified store model. Choose Jotai if you want atomic updates without a global store wrapper.
A utilizar "react-state-management". How do I handle server state with React Query vs client state with Redux Toolkit?
Resultado esperado:
Keep server state and client state separate for clarity and maintainability:
**React Query handles server state:**
- Server data, caching, and synchronization
- Automatic refetching and background updates
- Stale-while-revalidate caching strategy
- Optimistic mutations with rollback
**Redux Toolkit handles client state:**
- User interface state (modals, sidebar open/close)
- Authentication state (when not in cookies)
- Application preferences and settings
- Complex client-side derived state
This separation prevents mixing concerns and makes debugging easier since each tool has a clear purpose.
Auditoria de Segurança
SeguroAll 44 static findings are false positives. The scanner incorrectly flagged markdown code blocks as shell commands, standard documentation URLs as hardcoded secrets, and React/Redux patterns (state, slices, selectors) as cryptographic or reconnaissance patterns. This is legitimate documentation for React state management libraries.
Pontuação de qualidade
O Que Você Pode Construir
Choosing a State Solution for a New Project
A development team starting a new React application needs to select the right state management approach based on app size and requirements.
Implementing Server Data Caching
A frontend developer wants to add caching, background refetching, and optimistic updates for API data in a React application.
Migrating Legacy Redux to Modern Patterns
A developer needs to update verbose Redux boilerplate code to Redux Toolkit with Immer for immutable updates.
Tente Estes Prompts
How do I set up Redux Toolkit with TypeScript in a React app? Show how to create a store with slices and typed useDispatch and useSelector hooks.
Show me how to create a Zustand store that persists to localStorage with devtools support. Include how to access the store in components and handle typed state updates.
Write a React Query mutation that performs optimistic updates. Include onMutate for snapshotting previous state, onError for rollback, and onSettled for refetching.
How do I combine React Query for server state with Zustand for client-only state in the same application? Show the separation of concerns and how components consume both.
Melhores Práticas
- Colocate state as close to where it is used as possible - avoid putting everything in global state
- Use selectors to select only the needed data from stores to prevent unnecessary component re-renders
- Separate server state (React Query) from client state (Zustand/Redux) - each has different update patterns and lifetimes
Evitar
- Putting every piece of state in global state just because it is accessed by multiple components - local state is often sufficient
- Mutating state directly instead of using immutable update patterns or libraries like Immer
- Duplicating server state in both React Query and client stores - let React Query be the single source of truth for server data