← React.js learning pathReact.js · Module 7 of 10
Effects with useEffect
Run side effects like data fetching, timers and subscriptions after render.
📖 Key ideas
- useEffect(() => { ... }, [deps]) runs after render.
- Empty array [] runs once after the first render.
- Include every value the effect uses in the dependency array.
- Return a cleanup function to remove listeners or timers.
- Fetch data in an effect and store it in state.
💡 Real-life example: useEffect is like setting an alarm after you arrive somewhere, and turning it off (cleanup) when you leave.
useEffectHook for side effects
Dependency arrayValues that re-run the effect when changed
CleanupFunction returned to undo the effect
Side effectWork outside rendering, e.g. fetch