state-management
Implementar patrones de gestión de estado
또한 다음에서 사용할 수 있습니다: supercent-io
Gestionar el estado del servidor y el estado del cliente en aplicaciones React crea complejidad que ralentiza el desarrollo y perjudica la experiencia del usuario. Esta habilidad ofrece patrones probados para separar el estado del servidor del estado del cliente usando TanStack Query para la obtención de datos y Zustand para el estado de la UI.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"state-management" 사용 중입니다. Create a TanStack Query hook to fetch users
예상 결과:
- Factory de query keys para claves de caché consistentes
- Hook useUsers con soporte de filtros
- Hook useUser para obtener un único usuario
- Invalidación de caché en mutaciones
- Manejo de estados de error y carga
"state-management" 사용 중입니다. Create a Zustand store for theme settings
예상 결과:
- Interfaz de store tipada con estado de tema
- Acciones de alternar y establecer
- Middleware persist para localStorage
- Selector para re-renderizados eficientes
"state-management" 사용 중입니다. Build a form with validation
예상 결과:
- Esquema Zod para validación con tipos seguros
- Integración con React Hook Form
- Manejo de mensajes de error
- Handler de envío con datos tipados
보안 감사
안전Pure documentation skill containing only TypeScript code patterns for state management. All 53 static findings are FALSE POSITIVES. The scanner incorrectly identified TypeScript template literals (backticks) as Ruby shell execution, repository URLs as network vulnerabilities, and standard metadata fields as C2 keywords. No executable code, network calls, file system access, or external commands exist in this skill.
위험 요인
⚙️ 외부 명령어 (34)
🌐 네트워크 접근 (1)
품질 점수
만들 수 있는 것
Obtener y cachear datos del servidor
Implementar la obtención de datos con TanStack Query, incluyendo gestión de caché y refetching en segundo plano
Gestionar el estado de la UI globalmente
Crear stores de estado del lado del cliente con Zustand para tema, barra lateral y preferencias de usuario
Construir formularios validados
Crear formularios con tipos seguros usando React Hook Form y validación con Zod
이 프롬프트를 사용해 보세요
Create a TanStack Query hook to fetch users from /api/users endpoint with loading and error states
Implement a Zustand store with persist middleware to save user theme preference to localStorage
Create a query keys factory for a posts feature with support for list, detail, and filter queries
Show how to use Zustand selectors properly to prevent unnecessary re-renders in a large application
모범 사례
- Separar las preocupaciones del estado del servidor y del estado del cliente usando bibliotecas adecuadas
- Usar selectores en Zustand para seleccionar solo los fragmentos de estado que necesitan los componentes
- Implementar actualizaciones optimistas para mutaciones para mejorar el rendimiento percibido
피하기
- Almacenar datos obtenidos del servidor en estado global del cliente como Zustand
- Usar todo el store en lugar de selectores, causando re-renderizados innecesarios
- Obtener datos directamente en componentes sin caché ni TanStack Query
자주 묻는 질문
¿Qué versiones de React son compatibles?
¿Cuáles son los límites de rendimiento?
¿Cómo se integra con Next.js?
¿Mis datos están seguros con esta habilidad?
¿Por qué mi componente se re-renderiza demasiado?
¿Cuándo debo usar TanStack Query vs Zustand?
개발자 세부 정보
라이선스
MIT
참조
main
파일 구조