PostHog feature flags pour React

Cette skill vous aide à ajouter des feature flags PostHog à des applications React.

Fichiers de référence

• references/react.md - Installation des feature flags React - docs
• references/adding-feature-flag-code.md - Ajout du code des feature flags - docs
• references/best-practices.md - Bonnes pratiques des feature flags - docs

Consultez la documentation pour les détails d'API et les patterns spécifiques au framework.

Principes clés

• Variables d'environnement : Utilisez toujours des variables d'environnement pour les clés PostHog. Ne les codez jamais en dur.
• Changements minimaux : Ajoutez le code des feature flags à côté de la logique existante. Ne remplacez pas ou ne restructurez pas le code existant.
• Flags booléens en priorité : Privilégiez les vérifications de flags booléens, sauf si l'utilisateur demande spécifiquement des flags multivariés.
• Côté serveur si possible : Préférez l'évaluation des flags côté serveur pour éviter le scintillement de l'interface.

Outils PostHog MCP

Vérifiez si un serveur PostHog MCP est connecté. S'il est disponible, recherchez les outils liés à la gestion des feature flags (création, listing, mise à jour, suppression de flags). Utilisez ces outils pour gérer les flags directement dans PostHog plutôt que de demander à l'utilisateur de le faire manuellement dans le dashboard.

Directives du framework

• Pour les feature flags, utilisez les hooks useFeatureFlagEnabled() ou useFeatureFlagPayload() - ils gèrent les états de chargement et la synchronisation externe automatiquement
• Ajoutez la capture d'analytics dans les event handlers où les actions utilisateur se produisent, PAS dans useEffect réagissant à des changements d'état
• N'utilisez PAS useEffect pour la transformation de données - calculez les valeurs dérivées pendant le rendu
• N'utilisez PAS useEffect pour réagir aux événements utilisateur - mettez cette logique directement dans l'event handler
• N'utilisez PAS useEffect pour chaîner les mises à jour d'état - calculez toutes les mises à jour associées ensemble dans l'event handler
• N'utilisez PAS useEffect pour notifier les composants parents - appelez le callback parent aux côtés de setState dans l'event handler
• Pour réinitialiser l'état du composant quand une prop change, passez la prop comme clé du composant au lieu d'utiliser useEffect
• useEffect est UNIQUEMENT pour synchroniser avec des systèmes externes (widgets non-React, APIs du navigateur, souscriptions réseau)