react-zustand-patterns
Appliquer des modèles de gestion d’état avec Zustand
La simplicité de Zustand masque des complexités de timing qui provoquent des bugs subtils. Apprenez des modèles pour le comportement synchrone de set(), la prévention des closures obsolètes, les actions asynchrones et l’optimisation des sélecteurs afin d’écrire une gestion d’état React fiable.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「react-zustand-patterns」を使用しています。 Explain why set() is synchronous but my component still shows old values after calling it
期待される結果:
- set() met à jour le store Zustand immédiatement et de manière synchrone
- getState() affichera la nouvelle valeur juste après set()
- Cependant, les composants React ne se re-rendent qu’au prochain cycle de mise à jour batché
- La fonction du composant se réexécute avec d’anciens props/états jusqu’à ce que React traite le batch
- Utilise useStore.getState() directement si tu as besoin d’un accès immédiat en dehors des rendus de composants
「react-zustand-patterns」を使用しています。 How do I properly handle async data fetching in my Zustand store
期待される結果:
- Utilise le mot-clé async sur la fonction d’action
- Mets l’état de chargement à true avant le fetch
- Lis l’état après await avec get() pour garantir des valeurs à jour
- Gère les erreurs avec try/catch et définis l’état d’erreur
- Retourne la promesse pour que les appelants puissent attendre la fin
「react-zustand-patterns」を使用しています。 Why is my React component re-rendering too often with Zustand
期待される結果:
- Vérifie si ton sélecteur renvoie une nouvelle référence d’objet à chaque fois
- Utilise une comparaison superficielle avec zustand/shallow ou le hook useShallow
- Sépare en plusieurs sélecteurs qui renvoient des valeurs primitives
- Mémorise les valeurs dérivées en dehors du sélecteur si c’est coûteux
セキュリティ監査
安全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)
品質スコア
作れるもの
Corriger les bugs de timing d’état
Déboguer pourquoi les composants voient des valeurs obsolètes après des appels à set() à cause du comportement de rendu batché de React
Créer des actions de store asynchrones
Mettre en œuvre un chargement de données async robuste avec états de chargement, gestion des erreurs et prévention des conditions de course
Optimiser les performances de rendu
Éviter les re-renders inutiles en corrigeant des sélecteurs qui renvoient de nouveaux objets à chaque cycle de rendu
これらのプロンプトを試す
Explique comment set() fonctionne de manière synchrone mais que les re-renders React sont batchés. Montre pourquoi getState() renvoie immédiatement les nouvelles valeurs mais que les composants peuvent voir d’anciennes valeurs
Comment éviter les closures obsolètes dans Zustand ? Montre pourquoi les données capturées dans un callback deviennent obsolètes après await et comment utiliser get() correctement
Écris un modèle complet d’action async dans Zustand avec état de chargement, gestion des erreurs et protection contre les conditions de course en utilisant des vérifications get()
Corrige ce sélecteur qui provoque des re-renders inutiles : const data = useStore((s) => ({ name: s.name, count: s.count }))ベストプラクティス
- Utilise toujours get() ou getState() après tout await pour garantir des valeurs d’état à jour
- Utilise une comparaison superficielle ou plusieurs sélecteurs pour éviter la création d’objets dans les sélecteurs
- Ajoute le middleware devtools pendant le développement pour tracer les changements d’état
回避
- Se fier aux valeurs capturées par une closure après des opérations async sans utiliser get()
- Renvoyer de nouveaux objets depuis des sélecteurs, ce qui provoque des re-renders inutiles des composants
- Omettre le mot-clé async sur les actions de store qui renvoient des promesses