Lesson 27 of 3090%
(Progress persistence is disabled until Phase 9)
React
Beginner
Effect Dependencies
Controlling when useEffect runs.
The second argument to useEffect is the dependency array. It tells React when to re-run the effect.
- No array
useEffect(() => {...}): Runs after EVERY render. (Usually bad for performance). - Empty array
useEffect(() => {...}, []): Runs exactly ONCE, when the component first mounts. - With variables
useEffect(() => {...}, [count]): Runs on mount, AND whenevercountchanges.
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // Only re-run if count changes!
Try It Yourself