What Is useEffect in React and How Does It Work?

What Is useEffect in React and How Does It Work?

useEffect is the hook that handles side effects in functional components: data fetching, subscriptions, DOM manipulation, timers. It is also where most beginners get stuck.

What useEffect Does

useEffect runs a function after the component renders. That function can perform side effects and optionally return a cleanup function that runs before the next effect or on unmount.

The Dependency Array

The second argument to useEffect controls when it runs. No array means it runs after every render. An empty array means it runs only on mount. An array with values means it runs when any of those values change.

Why This Matters

The dependency array is the core of useEffect. Get it wrong and you get either an effect that never runs, or one that runs infinitely. Most useEffect bugs trace to a wrong dependency array.

Cleanup

If your effect sets up a subscription, listener, or timer, return a cleanup function. React calls it before the next effect and on unmount, preventing memory leaks and stale updates.

The Mental Model

Think of useEffect as 'after rendering, do this, and here is when to do it again.' The render produces the UI; the effect handles anything that reaches outside the component.

The Common Mistakes

Forgetting the dependency array causes infinite loops. Putting state you set inside the effect into the array also causes loops. Forgetting cleanup causes leaks.

The Takeaway

useEffect runs side effects after render, and the dependency array controls when it runs again. Always handle cleanup, and treat the dependency array as the most important part of the hook.