react-state-management
Implement React State Management
Auch verfügbar von: wshobson
This skill helps developers choose and implement the right state management solution for React applications, from simple local state to complex global stores with server synchronization.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "react-state-management". How do I choose between Redux Toolkit and Zustand?
Erwartetes Ergebnis:
For small to medium apps with simple state needs, Zustand offers a minimal API with excellent TypeScript support. For large enterprise apps requiring middleware, devtools integration, and strict patterns, Redux Toolkit provides structure. Use Zustand when: you need simple global state without boilerplate, you prefer hooks-based API, you want minimal bundle size. Use Redux Toolkit when: you need complex async logic with thunks, you require strict action tracking for debugging, your team is familiar with Redux patterns.
Verwendung von "react-state-management". Set up React Query for data fetching
Erwartetes Ergebnis:
Install @tanstack/react-query, then wrap your app with QueryClientProvider. Create a query client with default options for caching. Use useQuery hook for fetching with keys for cache management. Use useMutation for updates with optimistic updates via onMutate. The query key ['users', userId] enables automatic refetching and caching.
Sicherheitsaudit
SicherThis is a documentation skill for React state management patterns. Static analysis flagged external_commands, network, and sensitive data patterns, but evaluation confirms these are FALSE POSITIVES - the 'backticks' are TypeScript template literals in code examples, 'fetch' calls are legitimate API examples, and 'localStorage' access is proper state persistence teaching. No actual security risks identified.
Probleme mit mittlerem Risiko (2)
Probleme mit niedrigem Risiko (1)
Risikofaktoren
⚙️ Externe Befehle (20)
🌐 Netzwerkzugriff (6)
Qualitätsbewertung
Was du bauen kannst
New React Project Setup
Choose and configure the appropriate state management solution when starting a new React application
Legacy Migration
Migrate from older Redux patterns or class components to modern state management approaches
Performance Optimization
Reduce unnecessary re-renders and optimize state access patterns in existing applications
Probiere diese Prompts
Show me how to set up Zustand for a simple React app with user authentication state and theme toggle.
Create a Redux Toolkit store with typed hooks and a user slice that handles async fetching.
Set up React Query for fetching user data with caching, optimistic updates on mutations, and error handling.
Implement Jotai atoms for a shopping cart with derived atoms for totals and persistence to localStorage.
Bewährte Verfahren
- Separate client state from server state - use React Query for server data and Zustand/Redux for UI state
- Colocate state close to where it is used - avoid putting everything in global state
- Use TypeScript for all state-related code to prevent runtime errors and enable better IDE support
Vermeiden
- Storing server data in global state instead of using React Query - creates synchronization issues
- Over-globalizing state - putting component-specific state in Redux/Zustand when useState suffices
- Mutating state directly instead of using immutable update patterns - breaks reactivity
Häufig gestellte Fragen
What is the best state management for a new React project?
When should I use React Query vs Redux?
Can I use multiple state solutions together?
How do I persist state across page reloads?
What is the difference between Jotai and Zustand?
How do I handle async actions in Redux Toolkit?
Entwicklerdetails
Autor
sickn33Lizenz
MIT
Repository
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-state-managementRef
main
Dateistruktur
📄 SKILL.md