React › Effects & Lifecycle

What does the dependency array in useEffect actually control?

Intermediate

Answer

The dependency array tells React exactly which values, when changed, should cause the effect to run again. An empty array means the effect runs only once when the component first appears. Leaving it out entirely means the effect runs after every single render, which is rarely what you actually want.

useEffect(() => {
  console.log('Runs only once, when the component first appears');
}, []);

useEffect(() => {
  console.log('Runs every time count changes');
}, [count]);

useEffect(() => {
  console.log('Runs after every single render');
});

Real-world example A search page fetches new results only when the search term actually changes, by listing the search term as the single dependency in its useEffect, avoiding wasted requests on unrelated re renders.

Common follow-ups: What happens if you use a value inside useEffect but forget to include it in the dependency array?;What eslint rule helps catch missing dependencies automatically?

Hooks;Performance (memo/useMemo)