Side Effects (useEffect idea)
📚 What are Side Effects in React? A side effect is anything that affects something outside the component's render - like fetching data, setting up a subscription, starting a timer, or updating the page title. React's useEffect hook runs after the render and is where all side effects belong.
Appy Says…
Sometimes a component needs to do things beyond rendering — fetch data from an API, set up a timer, subscribe to a websocket. That's what useEffect is for: side effects that happen after React renders.
What is useEffect?
The useEffect hook runs a function after React renders the component. You control when it re-runs with the dependency array.
- •
useEffect(() => { /* effect */ }, [deps]) - •
[]— runs once on mount (like componentDidMount) - •
[value]— runs whenvaluechanges - •No array — runs after every render (usually wrong)
- •Return a cleanup function:
return () => clearInterval(id) - •Common uses: fetch data, subscribe to events, set page title, start timers
Think of it like a Roblox script that runs on spawn
In Roblox, a LocalScript runs its code when a player spawns. useEffect runs its code after React renders the component. The dependency array is like saying 'only run this again if the player's team changes'.
How It Works
- •1. React renders the component and updates the DOM
- •2. React calls your effect function
- •3. If deps changed since last render, the effect runs; otherwise it's skipped
- •4. Before running again, React calls your cleanup (if you returned one)
- •5. On unmount, the cleanup always runs
- •6. If your effect fetches data, put the fetch inside and cancel it in cleanup
Real-World Examples
- •Fetch on mount:
useEffect(() => { fetchUser(id).then(setUser); }, [id]) - •Page title:
useEffect(() => { document.title = `${count} new messages`; }, [count]) - •Interval:
useEffect(() => { const id = setInterval(...); return () => clearInterval(id); }, []) - •Keyboard listener: attach on mount, remove on unmount with cleanup
Key Facts
- •
useEffectruns after paint — not synchronously during render - •
useLayoutEffectruns synchronously after DOM updates but before paint — for measuring DOM elements - •React 18 runs effects twice in Strict Mode (dev only) to help catch cleanup issues
- •The ESLint rule
exhaustive-depswarns when you miss dependencies
Watch Out!
Putting a function in the deps array causes infinite loops if the function is recreated on every render (which it is by default). Wrap functions with useCallback or move them inside the effect to stabilise the dependency.
Remember
[] = run once on mount. [dep] = run when dep changes. Always return a cleanup for subscriptions and timers. Add all dependencies the effect uses.
What You Learned
- •useEffect runs code after render; deps array controls when it re-runs
- •Return a cleanup function for subscriptions, timers, and event listeners
- •Unlocks: data fetching, subscriptions, timers, DOM manipulation after render
Key Facts
- →
useEffectruns after paint — not synchronously during render - →
useLayoutEffectruns synchronously after DOM updates but before paint — for measuring DOM elements - →React 18 runs effects twice in Strict Mode (dev only) to help catch cleanup issues
- →The ESLint rule
exhaustive-depswarns when you miss dependencies
Real-World Examples
Remember
[] = run once on mount. [dep] = run when dep changes. Always return a cleanup for subscriptions and timers. Add all dependencies the effect uses.
Quick Quiz
useEffect runs?