react-effect-patterns

SKILL.md

Effects are an escape hatch from React for synchronizing with external systems. Removing unnecessary Effects makes code easier to follow, faster to run, and less error-prone.

| Transform data | Calculate during render | | Expensive calculation | useMemo | | Reset all state on prop | key attribute | | Adjust state on prop | Derive during render | | Share event logic | Extract function, call from handlers | | User events | Event handlers | | External system sync | Effect | | Notify parent | Update in handler or lift state |

| Init once | Module-level or guard variable | | External store | useSyncExternalStore | | Fetch data | Effect with cleanup |

Lignes directrices pour une utilisation appropriée de React et des effets et pour éviter les effets inutiles. À utiliser lors de l'écriture, de la révision ou de la refactorisation de composants React qui utilisent useEffect, useState ou gèrent les effets secondaires. Déclencheurs sur des tâches impliquant React Effects, un état dérivé, des gestionnaires d'événements, une récupération de données ou une synchronisation de composants. Source : nbbaier/agent-skills.

Voir l'original