useEffect: Syncing React with the Outside World

Why it exists

React components are designed to be pure functions: they take props and state and return UI. But real applications must interact with the outside world—fetching data, setting timers, or talking to browser APIs. useEffect provides a controlled, declarative way to manage these "side effects" without polluting the rendering logic.

The mental model

Think of useEffect as a declaration: "When this data changes, run this code to synchronize with an external system." It's a bridge from React's declarative world to the imperative world of APIs. The effect code runs after the component has rendered and been painted to the screen, so it doesn't block the UI.

How it works

You pass useEffect a setup function and a dependency array. After your component renders, React runs the setup function. This function can optionally return a cleanup function. If the component re-renders and a value in the dependency array has changed, React first runs the cleanup from the previous render, then runs the new setup function. The cleanup also runs when the component unmounts to prevent memory leaks.

When to use it

Use useEffect to connect to any system outside of React. Three common cases: first, fetching data from an API when a component mounts or an ID prop changes; second, subscribing to real-time events like a WebSocket or a browser event listener (e.g., window.addEventListener); third, controlling a non-React UI widget like a map library.

When not to use it

Avoid useEffect for logic that can be calculated during rendering. Don't use it to transform data for display; compute that directly in your component body. For handling user events like clicks, use event handlers (onClick). An effect that just sets state based on other state is often a sign that you should be calculating that value directly during render.

One canonical example

A ChatRoom component connects to a server based on a roomId prop. The effect calls createConnection(roomId) and includes [roomId] in its dependency array. When the user navigates to a new room, the roomId prop changes. React then runs the cleanup function to disconnect from the old room and runs the setup function again to connect to the new one. If roomId were missing from the dependencies, the component would never reconnect, showing stale chat data.