uinaf/agent-skills

React - Interdire useEffect

L'utilisation directe de useEffect est une échappatoire de synchronisation externe. Elle doit être utilisée dans un hook spécifique au domaine, révisé et destiné à un système externe réel ; les composants restent sans effet.

Périmètre

Le remplacement d'un effet modifie le comportement touché. L'application d'une règle de lint à l'ensemble du dépôt est une tâche distincte : appliquez-la lorsque demandé ou requis par la politique existante du dépôt. Une demande de révision produit des constatations ; une demande de mise en œuvre autorise les remplacements dans le périmètre et la vérification sans autre point d'approbation.

Flux de travail

1. Repérez les imports directs, les appels React.useEffect(...) dans les espaces de noms, et les wrappers autour de useEffect dans la surface touchée.

2. Classez chaque effet et remplacez-le selon cet ordre de préférence :

   1. calcul au moment du rendu
   2. API de données serveur, chargeur ou framework
   3. couche d'état serveur du dépôt (par exemple une fabrique queryOptions de TanStack Query avec des variables dans la clé et le signal passé comme paramètre)
   4. gestionnaire d'événement, action ou mutation
   5. limite de composant avec clé
   6. useSyncExternalStore
   7. hook spécifique au domaine révisé pour un système externe réel

   Si aucun ne convient, énoncez le contrat de synchronisation externe avant de conserver un effet. Remplacements couvre les cas non évidents.

3. Préservez le framework, la couche de données, la forme du lint et la politique de dépendances du dépôt. N'ajoutez une bibliothèque que si la demande ou la politique du dépôt l'autorise ; sans couche d'état serveur, qualifiez l'effet restant d'écart de conception.

4. Exécutez les contrôles de lint, de type, et de test, ainsi que le plus petit contrôle d'interface utilisateur ou de hook réel pour le comportement modifié.

Effets légitimes

Placez chaque effet légitime dans un hook nommé d'après son système externe (une connexion de chat, un SDK cartographique, un widget), dans son propre fichier. Le hook gère la configuration et le nettoyage, prend ses entrées réactives comme paramètres, et liste chaque valeur que la configuration ou le nettoyage lit, de sorte que react-hooks/exhaustive-deps réussisse sans désactivation. Préférez un hook existant du dépôt.

Le hook est spécifique à un seul système externe. Un wrapper générique qui prend un callback et un tableau de dépendances fourni par l'appelant (useUpdateEffect(fn, deps), useMountEffect(fn)) est un effet direct sous un autre nom, et l'état serveur, les copies de props, les actions utilisateur et les réinitialisations avec clé ont chacun leur propre remplacement ci-dessus.

Application

Lorsque l'application est dans le périmètre, étendez le linter existant du dépôt pour qu'il rejette à la fois les imports nommés de useEffect et les appels React.useEffect(...). Autorisez uniquement les fichiers de hooks d'intégration nommés et révisés, pas un répertoire tel que src/hooks/** ; signalez les wrappers génériques et leurs appelants comme des violations à migrer. Exécutez la même surface de lint dans le contrôle local canonique et dans l'IC, avec des versions d'outils fixées.

Lors de la révision, chaque nouvel effet direct est une constatation, sauf si le changement documente et prouve une limite légitime de système externe. Demandez un remplacement, pas un réglage du tableau de dépendances.

Limites

• Limitez les migrations à la surface touchée ou demandée.
• Laissez useLayoutEffect, useInsertionEffect, les API de cycle de vie du framework, et les systèmes d'effets non React tranquilles, y compris dans les règles de lint, sauf demande explicite.
• Appliquez les primitives de performance uniquement pour un comportement mesuré ou un modèle de dépôt établi.
• Attribution en amont : en amont.