Synchronizing with Effects

Most of your code so far lives in two places. Rendering code turns props and state into JSX, and must be pure. Event handlers run when the user does something, like clicking a button.

Some code fits neither. Say a chat room component must connect to a chat server whenever it is on screen. Nobody clicked anything; the connection should exist because the component is displayed. That is what Effects are for: code that runs after rendering, to synchronize your component with a system outside React.

Your first EffectCopy Anchor Link

An "external system" is anything React doesn't control: a network connection, a browser API like setInterval or addEventListener, a third-party map widget, or localStorage. Here is an Effect that keeps a clock running with setInterval:

There are three parts, and you will write them in this order:

1. Declare the Effect. Call useEffect with a function. React runs that function after the component appears on screen.
2. Specify the dependencies. The array at the end tells React when to run the Effect again. An empty array [] means "only when the component first appears".
3. Add cleanup if needed. The function you return is the cleanup. React calls it before running the Effect again and when the component disappears. Here it stops the interval.

Dependencies: when should the Effect re-run?Copy Anchor Link

The dependency array decides how often your Effect runs:

useEffect(() => {
  // Runs after EVERY render
});

useEffect(() => {
  // Runs only when the component first appears (mounts)
}, []);

useEffect(() => {
  // Runs on mount, and again whenever roomId has changed since the last render
}, [roomId]);

The rule is simple: every reactive value your Effect reads must be in the array. Reactive values are props, state, and anything calculated from them inside the component. You don't choose the dependencies; your code does. The eslint-plugin-react-hooks linter that comes with Vite's template checks this for you.

Here is the classic example. A chat room connects to whichever room you select. Open the console panel and switch rooms.

Watch the log when you change rooms: React disconnects from the old room (cleanup with the old roomId), then connects to the new one. Click "Close chat" and you see one final disconnect.

Why does it run twice?Copy Anchor Link

When the sandbox first loaded, you probably saw this in the console:

Connecting to "general"...
Disconnected from "general"
Connecting to "general"...

That is not a bug. In development, Strict Mode mounts every component, immediately unmounts it, and mounts it again. It is a stress test: if your cleanup correctly undoes your setup, the user can't tell the difference between "setup once" and "setup, cleanup, setup". If something breaks, you have found a missing cleanup before your users did. This only happens in development; production runs the Effect once.

useEffect(() => {
  function handleKeyDown(e) {
    console.log('You pressed: ' + e.key);
  }
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // always the latest theme
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // theme is not a dependency anymore
}