react-state-management
Implement React State Management
También disponible en: 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.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "react-state-management". How do I choose between Redux Toolkit and Zustand?
Resultado esperado:
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.
Usando "react-state-management". Set up React Query for data fetching
Resultado esperado:
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.
Auditoría de seguridad
SeguroThis 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.
Problemas de riesgo medio (2)
Problemas de riesgo bajo (1)
Factores de riesgo
⚙️ Comandos externos (20)
🌐 Acceso a red (6)
Puntuación de calidad
Lo que puedes crear
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
Prueba estos 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.
Mejores prácticas
- 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
Evitar
- 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
Preguntas frecuentes
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?
Detalles del desarrollador
Autor
sickn33Licencia
MIT
Repositorio
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-state-managementRef.
main
Estructura de archivos
📄 SKILL.md