Effects vs Render, Dependencies & Cleanup
Differences between render and effects; dependency arrays ([] , [x]) and writing cleanup functions.
Effects vs Render, Dependencies & Cleanup is a free React Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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)
Demo: dependencies in action
An effect with [count] updates the title whenever count changes. Compare to [] which runs only once.
<div id="root"></div>
Why cleanup matters
Add a cleanup by returning a function from the effect. React runs it before re-running the effect and on unmount.
- Remove listeners
- Clear timers
- Cancel requests
Demo: effect cleanup
We attach a resize listener in an effect and remove it in the cleanup to avoid leaks.
<div id="root"></div>
Pitfalls to avoid
Pitfalls:
- Doing side effects during render—move them to useEffect.
- Missing deps causing stale values.
- Forgetting cleanup for listeners/timers.
Cleanup placement check
Recap
Recap: Render stays pure; effects run after paint. Use dependency arrays to control when they run, and return a cleanup to unsubscribe or clear timers.
Frequently asked questions
Is the “Effects vs Render, Dependencies & Cleanup” lesson free?
Yes — the full text of “Effects vs Render, Dependencies & Cleanup” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Effects vs Render, Dependencies & Cleanup”?
Differences between render and effects; dependency arrays ([] , [x]) and writing cleanup functions. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Effects vs Render, Dependencies & Cleanup” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Effects vs Render, Dependencies & Cleanup
- Common Pitfalls: Stale Closures & Missing Deps
- Fetching Basics in Effects (Abort & Cleanup)