react-effect-patterns

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 |

إرشادات لاستخدام React useEffect المناسب وتجنب التأثيرات غير الضرورية. يُستخدم عند كتابة أو مراجعة أو إعادة بناء مكونات React التي تستخدم useEffect أو useState أو تتعامل مع التأثيرات الجانبية. يتم تشغيلها على المهام التي تتضمن تأثيرات React، أو الحالة المشتقة، أو معالجات الأحداث، أو جلب البيانات، أو مزامنة المكونات. المصدر: nbbaier/agent-skills.