Effects vs Render, Dependencies & Cleanup
Differences between render and effects; dependency arrays ([] , [x]) and writing cleanup functions.
Render vs effect
Goal: Know what runs during render (pure, no side effects) and what belongs in effects (sync with the outside world).
- Render: return UI
- Effect: run after paint
- Cleanup: undo work
Dependency rules
Dependencies control when an effect runs:
- []: run once after mount
- [x]: run on mount and whenever x changes
- Omit deps: run after every render (avoid for beginners)
All lessons in this course
- Effects vs Render, Dependencies & Cleanup
- Common Pitfalls: Stale Closures & Missing Deps
- Fetching Basics in Effects (Abort & Cleanup)