react-zustand-patterns
Aplicar padrões de gerenciamento de estado com Zustand
A simplicidade do Zustand esconde complexidades de timing que causam bugs sutis. Aprenda padrões para o comportamento síncrono de set(), prevenção de closures obsoletas, ações assíncronas e otimização de seletores para escrever um gerenciamento de estado React confiável.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"react-zustand-patterns" 사용 중입니다. Explique por que set() é síncrono, mas meu componente ainda mostra valores antigos depois de chamá-lo
예상 결과:
- set() atualiza a store do Zustand imediatamente e de forma síncrona
- getState() mostrará o novo valor logo após set()
- No entanto, componentes React só re-renderizam no próximo ciclo de atualização em lote
- A função do componente reexecuta com props/estado antigos até o React processar o lote
- Use useStore.getState() diretamente se precisar de acesso imediato fora das renderizações do componente
"react-zustand-patterns" 사용 중입니다. Como lido corretamente com o fetch de dados assíncronos na minha store Zustand
예상 결과:
- Use a palavra-chave async na função de ação
- Defina o estado de carregamento como true antes do fetch
- Leia o estado após await usando get() para garantir valores atualizados
- Trate erros com try/catch e defina o estado de erro
- Retorne a promise para que chamadores possam aguardar a conclusão
"react-zustand-patterns" 사용 중입니다. Por que meu componente React está re-renderizando com muita frequência com Zustand
예상 결과:
- Verifique se o seu seletor retorna uma nova referência de objeto a cada vez
- Use comparação rasa com zustand/shallow ou o hook useShallow
- Divida em múltiplos seletores que retornem valores primitivos
- Memoize valores derivados fora do seletor se forem caros
보안 감사
안전Pure documentation skill containing educational content about Zustand state management patterns. All 52 static findings are false positives: markdown code block delimiters were misidentified as shell command execution, TypeScript syntax patterns as cryptographic algorithms, and feature documentation as executable code. No executable code, network calls, file system access, or credential handling exists.
위험 요인
🌐 네트워크 접근 (3)
⚙️ 외부 명령어 (35)
품질 점수
만들 수 있는 것
Corrigir Bugs de Timing de Estado
Depure por que componentes veem valores obsoletos após chamadas de set() devido ao comportamento de renderização em lote do React
Construir Ações Assíncronas na Store
Implemente fetch de dados assíncronos robusto com estados de carregamento adequados, tratamento de erros e prevenção de race conditions
Otimizar Performance de Renderização
Evite re-renderizações desnecessárias corrigindo seletores que retornam novos objetos a cada ciclo de renderização
이 프롬프트를 사용해 보세요
Explique como set() funciona de forma síncrona, mas as re-renderizações do React são em lote. Mostre por que getState() retorna novos valores imediatamente, mas os componentes podem ver valores antigos
Como evito closures obsoletas no Zustand? Mostre por que dados capturados em um callback ficam obsoletos após await e como usar get() corretamente
Escreva um padrão completo de ação assíncrona no Zustand com estado de carregamento, tratamento de erros e proteção contra race condition usando verificações com get()
Corrija este seletor que causa re-renderizações desnecessárias: const data = useStore((s) => ({ name: s.name, count: s.count }))모범 사례
- Sempre use get() ou getState() após qualquer await para garantir valores de estado atualizados
- Use comparação rasa ou múltiplos seletores para evitar criação de objetos em seletores
- Adicione o middleware devtools durante o desenvolvimento para rastrear mudanças de estado
피하기
- Confiar em valores capturados por closure após operações assíncronas sem usar get()
- Retornar novos objetos de seletores que causam re-renderizações desnecessárias de componentes
- Pular a palavra-chave async em ações da store que retornam promises