Модуль 14 · Урок 55
Effects як external synchronization і safe cleanup
Effect синхронізує component з external system після commit. Якщо external system немає, derived calculation або interaction-specific logic зазвичай не потребують Effect.
Render, event чи Effect?
| Logic | Місце |
|---|---|
| Filter current list | Render calculation |
| Submit purchase/search | Event handler |
| Connect subscription/fetch for visible state | Effect або framework data layer |
Effect setup повертає cleanup. Dependency list містить усі reactive values, які читає process; її не «обирають» для бажаної частоти. Щоб прибрати dependency, змініть surrounding code й доведіть, що value не reactive.
Strict Mode і async race
useEffect(() => { const controller = new AbortController(); load(controller.signal); return () => controller.abort(); }, [requestKey]);Development Strict Mode виконує setup→cleanup→setup як stress test. Cleanup має дзеркально зупиняти request/subscription/timer. Для async state застосуйте AbortSignal та active/ignore guard, перевірте non-2xx, runtime shape, loading/error/empty/success і не дозвольте stale response перезаписати новішу.
Лабораторна
Запустіть local fixture app, зафіксуйте Effect contract, Strict Mode trace та шість race cases. Lab не робить external request і не зберігає credentials.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.