The lifecycle of an effect

A chat room that follows the room you pick

In Synchronizing with effects, a chat room connected to a server in an effect, and its cleanup disconnected. This lesson follows one such effect over the whole life of a page: you switch rooms, close the chat, and open it again, and you watch every start and stop. chat.js, in the second tab, is a pretend server that prints them instead of connecting.

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4const serverUrl = "https://chat.example.com";5 6function ChatRoom({ roomId }) {7  useEffect(() => {8    const connection = createConnection(serverUrl, roomId);9    connection.connect();10    return () => connection.disconnect();11  }, [roomId]);12 13  return <h3>Welcome to the {roomId} room</h3>;14}15 16export default function App() {17  const [roomId, setRoomId] = useState("general");18  const [show, setShow] = useState(true);19  return (20    <>21      <p>22        {["general", "travel", "music"].map((room) => (23          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>24        ))}{" "}25        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>26      </p>27      {show && <ChatRoom roomId={roomId} />}28    </>29  );30}

Line 4 is the server's address, outside any component. ChatRoom (lines 6 to 14) takes the room as a prop. Its effect (lines 7 to 11) makes a connection for this roomId (line 8), connects (line 9), and returns a cleanup that disconnects (line 10). Line 11 lists [roomId]. App keeps the room (line 17) and whether the chat is open (line 18), makes a button per room (lines 22 to 24), and shows ChatRoom only while the chat is open (line 27).

The console starts with Start, Stop, Start for general: in development, StrictMode stops and starts every new effect once, to check that it can. Now press travel. Two lines: Stop: disconnect from "general", then Start: connect to "travel". ChatRoom didn't leave the page; only its heading changed. Press travel again: nothing, because the room didn't change. Press music, then Close chat: a stop and a start, then one last stop.

One component, which appeared once and went away once. One effect, which started and stopped three times. They don't have the same life.

Start and stop, not mount and unmount

It's tempting to read an effect as "this runs when the component mounts, and the cleanup when it unmounts". That story breaks as soon as a prop changes. Read the effect on its own instead:

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => connection.disconnect();
}, [roomId]);

This fragment of ChatRoom isn't meant to run on its own. Lines 2 and 3 say how to start synchronizing with one room: connect to it. Line 4 says how to stop: disconnect. Line 5 says what it follows: roomId. Nothing in it mentions mounting. From the effect's point of view, the session above was:

1. Start synchronizing with general.
2. Stop synchronizing with general. Start synchronizing with travel.
3. Stop synchronizing with travel. Start synchronizing with music.
4. Stop synchronizing with music.

Write every effect so that it can start and stop like this, any number of times, for any value of what it reads. Then you never have to think about which moment in the component's life it is. The playground runs the same ChatRoom and draws both lives side by side.

Pick travel and music: the top lane keeps one bar, and the bottom lane gets a new bar for each room. Close chat ends both. Open chat starts a new ChatRoom, with a new bar in each lane. Pick a room while the chat is closed, and nothing happens until you open it.

Each row asks the same question of the component and of its effect:

This is also why StrictMode stops and starts every new effect once in development. If the effect survives a stop and a start straight away, it will survive one when the room changes too.

How React re-synchronizes

When you press travel, React renders ChatRoom with roomId "travel" and puts the new heading on the page. Then it compares the dependency list with last time, using Object.is: "general" and "travel" differ, so it re-synchronizes, in two steps:

1. It calls the cleanup that the effect returned after the last render. That cleanup still holds "general".
2. It runs the effect from the new render, which holds "travel".

Each render makes its own effect function and its own cleanup, and each sees that render's roomId, the way any function remembers the variables around it where it was made (a closure). That's why the cleanup disconnects from the right room without you storing the old one anywhere.

The same two steps cover the component's whole life. When ChatRoom leaves the page, React calls the last cleanup and runs nothing after it. Close the chat, press general, and open it again: a brand-new ChatRoom appears, and its effect starts with "general", with StrictMode's check again, because the component is new.

Reactive values: props, state, and what you work out from them

roomId is a reactive value: a value declared inside the component, so a render can give it a new value. Props are reactive, state is reactive, and so is anything you work out from them in the component body. This chat lets you switch to a backup server:

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  const [useBackup, setUseBackup] = useState(false);6  const serverUrl = useBackup ? "https://backup.example.com" : "https://chat.example.com";7 8  useEffect(() => {9    const connection = createConnection(serverUrl, roomId);10    connection.connect();11    return () => connection.disconnect();12  }, [serverUrl, roomId]);13 14  return (15    <>16      <h3>Welcome to the {roomId} room</h3>17      <label>18        <input type="checkbox" checked={useBackup} onChange={() => setUseBackup(!useBackup)} /> Use the backup server19      </label>20    </>21  );22}23 24export default function App() {25  const [roomId, setRoomId] = useState("general");26  const [show, setShow] = useState(true);27  return (28    <>29      <p>30        {["general", "travel", "music"].map((room) => (31          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>32        ))}{" "}33        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>34      </p>35      {show && <ChatRoom roomId={roomId} />}36    </>37  );38}

Line 5 keeps useBackup in state. Line 6 works out serverUrl from it. serverUrl isn't state, but it's made again on every render from state, so it can change: it's reactive. The effect reads it, so line 12 lists it next to roomId.

Tick Use the backup server. The console prints Stop: disconnect from "general" at https://chat.example.com, then Start: connect to "general" at https://backup.example.com. Same room, new server, so the effect stops and starts again. Pick travel: it stops at the backup server and starts travel there.

Now move both values out of the component:

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4const serverUrl = "https://chat.example.com";5const roomId = "general";6 7function ChatRoom() {8  useEffect(() => {9    const connection = createConnection(serverUrl, roomId);10    connection.connect();11    return () => connection.disconnect();12  }, []);13 14  return <h3>Welcome to the {roomId} room</h3>;15}16 17export default function App() {18  const [show, setShow] = useState(true);19  return (20    <>21      <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>22      {show && <ChatRoom />}23    </>24  );25}

Lines 4 and 5 are made once, when the module loads, and no render can change them. The effect reads nothing reactive, so its list on line 12 is empty, and the linter agrees. From the effect's point of view, [] means: start when ChatRoom appears, and stop when it goes. Press Close chat: one stop. That's the only time a list of dependencies means "mount and unmount", and it's because nothing in it can change.

Every reactive value is a dependency

Here is the backup-server chat with one change: line 12 lists only roomId.

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  const [useBackup, setUseBackup] = useState(false);6  const serverUrl = useBackup ? "https://backup.example.com" : "https://chat.example.com";7 8  useEffect(() => {9    const connection = createConnection(serverUrl, roomId);10    connection.connect();11    return () => connection.disconnect();12  }, [roomId]);13 14  return (15    <>16      <h3>Welcome to the {roomId} room</h3>17      <label>18        <input type="checkbox" checked={useBackup} onChange={() => setUseBackup(!useBackup)} /> Use the backup server19      </label>20    </>21  );22}23 24export default function App() {25  const [roomId, setRoomId] = useState("general");26  const [show, setShow] = useState(true);27  return (28    <>29      <p>30        {["general", "travel", "music"].map((room) => (31          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>32        ))}{" "}33        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>34      </p>35      {show && <ChatRoom roomId={roomId} />}36    </>37  );38}

Tick Use the backup server. Nothing prints. The checkbox is ticked, serverUrl is the backup address in this render, and the connection is still on the main server: React compared [roomId], found it the same, and left the effect alone. Now pick travel. The console prints Stop: disconnect from "general" at https://chat.example.com and Start: connect to "travel" at https://backup.example.com. The server change arrived late, carried in by a room change.

React's ESLint plugin, eslint-plugin-react-hooks, catches this before you run the code. Its rule react-hooks/exhaustive-deps reads the effect, finds every reactive value it uses, and compares them with the list. For line 12 it says:

React Hook useEffect has a missing dependency: 'serverUrl'. Either include it or remove the dependency array.

You don't choose an effect's dependencies; its code does. Every reactive value it reads goes in the list. If you want a value to stop being a dependency, change the code so it isn't reactive, as the section on the linter shows.

What isn't reactive

Three kinds of value an effect can read without listing them:

• Values outside the component, like serverUrl above ChatRoom. They're made once.
• Stable values React promises never to change: the set function from useState and the object useRef returns.
• Values made inside the effect itself. The effect makes them; it doesn't read them from the component.

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  const inputRef = useRef(null);

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    setMessages([]);
    inputRef.current.focus();
    return () => connection.disconnect();
  }, [roomId]);
}

This fragment isn't meant to run on its own. Line 8 calls setMessages and line 9 uses inputRef, and line 11 lists neither. React gives back the same setMessages and the same ref object on every render, so they can't make the effect start again. Listing them is allowed and changes nothing. The linter knows this and doesn't ask.

A ref's current is different. You change it by assigning to it, and that doesn't render anything. So it isn't reactive, and putting it in the list doesn't make it one:

1import { useEffect, useRef, useState } from "react";2 3function ChatRoom({ roomId }) {4  const mutedRef = useRef(false);5  const [draft, setDraft] = useState("");6 7  useEffect(() => {8    console.log(`Start: "${roomId}", muted: ${mutedRef.current}`);9    return () => console.log(`Stop: "${roomId}"`);10  }, [roomId, mutedRef.current]);11 12  return (13    <>14      <button onClick={() => (mutedRef.current = !mutedRef.current)}>Mute</button>{" "}15      <input aria-label="Message" value={draft} onChange={(event) => setDraft(event.target.value)} />16    </>17  );18}19 20export default function App() {21  return <ChatRoom roomId="general" />;22}

Line 4 keeps muted in a ref, and line 10 lists mutedRef.current. Line 14's Mute button flips it. Press Mute: nothing prints. Now type a letter in the box. The console prints Stop: "general" and Start: "general", muted: true. React only compares the list while it renders, and typing caused the next render, so the effect followed the mute late, and for the wrong reason. The linter flags line 10:

React Hook useEffect has an unnecessary dependency: 'mutedRef.current'. Either exclude it or remove the dependency array. Mutable values like 'mutedRef.current' aren't valid dependencies because mutating them doesn't re-render the component.

If an effect must follow a value, the value must be state: exercise 5 makes that change. Values the browser changes, like location.pathname, are the same kind of trap:

function ChatRoom({ roomId }) {
  useEffect(() => {
    logVisit(roomId, location.pathname);
  }, [roomId, location.pathname]);
}

React Hook useEffect has an unnecessary dependency: 'location.pathname'. Either exclude it or remove the dependency array. Outer scope values like 'location.pathname' aren't valid dependencies because mutating them doesn't re-render the component.

The browser changes location.pathname without telling React. To read it and render when it changes, subscribe to it with useSyncExternalStore, as You might not need an effect does for the online status. Each row says whether an effect must list a kind of value:

Why the linter is right

Every warning from react-hooks/exhaustive-deps points at a value that can change while the effect keeps using an old one. That's exactly the missing-server bug. The tempting fix is a comment that silences the rule:

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => connection.disconnect();
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [roomId]);

Line 5 tells ESLint to skip the next line. The warning disappears and the bug stays: this fragment is the missing-server effect again. A silenced warning is where to look first when an effect uses old values. If you never silence the rule, you don't get that kind of bug.

When an effect re-synchronizes more than you want, change the code so the value isn't reactive. You have already seen one way: move it outside the component. The other is to move it inside the effect:

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  useEffect(() => {6    const serverUrl = roomId === "music" ? "https://backup.example.com" : "https://chat.example.com";7    const connection = createConnection(serverUrl, roomId);8    connection.connect();9    return () => connection.disconnect();10  }, [roomId]);11 12  return <h3>Welcome to the {roomId} room</h3>;13}14 15export default function App() {16  const [roomId, setRoomId] = useState("general");17  const [show, setShow] = useState(true);18  return (19    <>20      <p>21        {["general", "travel", "music"].map((room) => (22          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>23        ))}{" "}24        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>25      </p>26      {show && <ChatRoom roomId={roomId} />}27    </>28  );29}

Line 6 picks the server inside the effect, from roomId: the music room uses the backup server. The effect reads only roomId from the component, so [roomId] on line 10 is the complete list, and the linter is quiet. Press music: Start: connect to "music" at https://backup.example.com.

Two harder cases get lessons of their own. Sometimes an effect needs the latest value of something without re-synchronizing when it changes; useEffectEvent, added in React 19.2, does that (Separating events from effects). And sometimes a dependency like an object or a function changes on every render; Removing effect dependencies shows how to change the code so it doesn't. Neither case is solved by silencing the linter.

One effect for each synchronization

A real chat also records a visit when you open a room, for analytics. logVisit, in analytics.js, prints a line instead of sending it. It's tempting to add the call to the effect you already have:

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3import { logVisit } from "./analytics.js";4 5function ChatRoom({ roomId }) {6  const [useBackup, setUseBackup] = useState(false);7  const serverUrl = useBackup ? "https://backup.example.com" : "https://chat.example.com";8 9  useEffect(() => {10    logVisit(roomId);11    const connection = createConnection(serverUrl, roomId);12    connection.connect();13    return () => connection.disconnect();14  }, [serverUrl, roomId]);15 16  return (17    <>18      <h3>Welcome to the {roomId} room</h3>19      <label>20        <input type="checkbox" checked={useBackup} onChange={() => setUseBackup(!useBackup)} /> Use the backup server21      </label>22    </>23  );24}25 26export default function App() {27  const [roomId, setRoomId] = useState("general");28  const [show, setShow] = useState(true);29  return (30    <>31      <p>32        {["general", "travel", "music"].map((room) => (33          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>34        ))}{" "}35        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>36      </p>37      {show && <ChatRoom roomId={roomId} />}38    </>39  );40}

Lines 9 to 14 record the visit and connect, in one effect, which lists both values it reads. It works until you tick Use the backup server: the console prints Visit: "general" again, between the stop and the start. Nobody visited anything; the server changed, and the visit came along because it shares an effect with the connection.

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3import { logVisit } from "./analytics.js";4 5function ChatRoom({ roomId }) {6  const [useBackup, setUseBackup] = useState(false);7  const serverUrl = useBackup ? "https://backup.example.com" : "https://chat.example.com";8 9  useEffect(() => {10    logVisit(roomId);11  }, [roomId]);12 13  useEffect(() => {14    const connection = createConnection(serverUrl, roomId);15    connection.connect();16    return () => connection.disconnect();17  }, [serverUrl, roomId]);18 19  return (20    <>21      <h3>Welcome to the {roomId} room</h3>22      <label>23        <input type="checkbox" checked={useBackup} onChange={() => setUseBackup(!useBackup)} /> Use the backup server24      </label>25    </>26  );27}28 29export default function App() {30  const [roomId, setRoomId] = useState("general");31  const [show, setShow] = useState(true);32  return (33    <>34      <p>35        {["general", "travel", "music"].map((room) => (36          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>37        ))}{" "}38        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>39      </p>40      {show && <ChatRoom roomId={roomId} />}41    </>42  );43}

Lines 9 to 11 record a visit, and follow only roomId. Lines 13 to 17 keep the connection, and follow serverUrl and roomId. Tick the backup server: a stop and a start, and no visit. Pick travel: both effects run. Split effects by what they keep in step, not by when they happen to run. Each one then lists exactly what it reads, and starts and stops only for its own reasons.

Common mix-ups

• "An effect runs on mount and its cleanup on unmount." No. It starts and stops each time a value it reads changes. Mount and unmount are only the first start and the last stop.
• "Leaving a value out of the list makes the effect run less." No. It makes the effect keep an old value, like the main server after you picked the backup.
• "An empty list means run once." No. It means the effect reads nothing reactive, so it starts and stops with the component. StrictMode still stops and starts it once in development.
• "Putting ref.current in the list makes React watch it." No. React only compares the list while rendering, and changing a ref doesn't render.
• "Silencing the linter is fine when you know the value won't change." No. If it can't change, move it outside the component and the warning goes away on its own.
• "Set functions must be in the list." No. They never change. Listing them is allowed and does nothing.

Practice exercises

Each exercise runs live with chat.js. Read the console under the result after every click.

import { useEffect, useState } from "react";
import { createConnection } from "./chat.js";

const serverUrl = "https://chat.example.com";

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);

  return <h3>Welcome to the {roomId} room</h3>;
}

export default function App() {
  const [roomId, setRoomId] = useState("general");
  const [show, setShow] = useState(true);
  return (
    <>
      <p>
        {["general", "travel", "music"].map((room) => (
          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>
        ))}{" "}
        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>
      </p>
      {show && <ChatRoom roomId={roomId} />}
    </>
  );
}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4const serverUrl = "https://chat.example.com";5 6function ChatRoom({ roomId }) {7  useEffect(() => {8    const connection = createConnection(serverUrl, roomId);9    connection.connect();10    return () => connection.disconnect();11  }, [roomId]);12 13  return <h3>Welcome to the {roomId} room</h3>;14}15 16export default function App() {17  const [roomId, setRoomId] = useState("general");18  const [show, setShow] = useState(true);19  return (20    <>21      <p>22        {["general", "travel", "music"].map((room) => (23          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>24        ))}{" "}25        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>26      </p>27      {show && <ChatRoom roomId={roomId} />}28    </>29  );30}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  const [useBackup, setUseBackup] = useState(false);6  const serverUrl = useBackup ? "https://backup.example.com" : "https://chat.example.com";7 8  useEffect(() => {9    const connection = createConnection(serverUrl, roomId);10    connection.connect();11    return () => connection.disconnect();12  }, []);13 14  return (15    <>16      <h3>Welcome to the {roomId} room</h3>17      <label>18        <input type="checkbox" checked={useBackup} onChange={() => setUseBackup(!useBackup)} /> Use the backup server19      </label>20    </>21  );22}23 24export default function App() {25  const [roomId, setRoomId] = useState("general");26  const [show, setShow] = useState(true);27  return (28    <>29      <p>30        {["general", "travel", "music"].map((room) => (31          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>32        ))}{" "}33        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>34      </p>35      {show && <ChatRoom roomId={roomId} />}36    </>37  );38}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  const [useBackup, setUseBackup] = useState(false);6  const serverUrl = useBackup ? "https://backup.example.com" : "https://chat.example.com";7 8  useEffect(() => {9    const connection = createConnection(serverUrl, roomId);10    connection.connect();11    return () => connection.disconnect();12  }, [serverUrl, roomId]);13 14  return (15    <>16      <h3>Welcome to the {roomId} room</h3>17      <label>18        <input type="checkbox" checked={useBackup} onChange={() => setUseBackup(!useBackup)} /> Use the backup server19      </label>20    </>21  );22}23 24export default function App() {25  const [roomId, setRoomId] = useState("general");26  const [show, setShow] = useState(true);27  return (28    <>29      <p>30        {["general", "travel", "music"].map((room) => (31          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>32        ))}{" "}33        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>34      </p>35      {show && <ChatRoom roomId={roomId} />}36    </>37  );38}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  const [useBackup, setUseBackup] = useState(false);6  const serverUrl = useBackup ? "https://backup.example.com" : "https://chat.example.com";7 8  useEffect(() => {9    const connection = createConnection(serverUrl, roomId);10    connection.connect();11    return () => connection.disconnect();12  }, [roomId]);13 14  return (15    <>16      <h3>Welcome to the {roomId} room</h3>17      <label>18        <input type="checkbox" checked={useBackup} onChange={() => setUseBackup(!useBackup)} /> Use the backup server19      </label>20    </>21  );22}23 24export default function App() {25  const [roomId, setRoomId] = useState("general");26  const [show, setShow] = useState(true);27  return (28    <>29      <p>30        {["general", "travel", "music"].map((room) => (31          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>32        ))}{" "}33        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>34      </p>35      {show && <ChatRoom roomId={roomId} />}36    </>37  );38}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  const [useBackup, setUseBackup] = useState(false);6  const serverUrl = useBackup ? "https://backup.example.com" : "https://chat.example.com";7 8  useEffect(() => {9    const connection = createConnection(serverUrl, roomId);10    connection.connect();11    return () => connection.disconnect();12  }, [serverUrl, roomId]);13 14  return (15    <>16      <h3>Welcome to the {roomId} room</h3>17      <label>18        <input type="checkbox" checked={useBackup} onChange={() => setUseBackup(!useBackup)} /> Use the backup server19      </label>20    </>21  );22}23 24export default function App() {25  const [roomId, setRoomId] = useState("general");26  const [show, setShow] = useState(true);27  return (28    <>29      <p>30        {["general", "travel", "music"].map((room) => (31          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>32        ))}{" "}33        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>34      </p>35      {show && <ChatRoom roomId={roomId} />}36    </>37  );38}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4const serverUrl = "https://chat.example.com";5 6function ChatRoom({ roomId, isOn }) {7  useEffect(() => {8    const connection = createConnection(serverUrl, roomId);9    connection.connect();10    return () => connection.disconnect();11  }, [roomId]);12 13  return <h3>{isOn ? `Connected to ${roomId}` : "Chat is off"}</h3>;14}15 16export default function App() {17  const [isOn, setIsOn] = useState(true);18  return (19    <>20      <label>21        <input type="checkbox" checked={isOn} onChange={() => setIsOn(!isOn)} /> Chat on22      </label>23      <ChatRoom roomId="general" isOn={isOn} />24    </>25  );26}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4const serverUrl = "https://chat.example.com";5 6function ChatRoom({ roomId, isOn }) {7  useEffect(() => {8    if (!isOn) return;9    const connection = createConnection(serverUrl, roomId);10    connection.connect();11    return () => connection.disconnect();12  }, [roomId, isOn]);13 14  return <h3>{isOn ? `Connected to ${roomId}` : "Chat is off"}</h3>;15}16 17export default function App() {18  const [isOn, setIsOn] = useState(true);19  return (20    <>21      <label>22        <input type="checkbox" checked={isOn} onChange={() => setIsOn(!isOn)} /> Chat on23      </label>24      <ChatRoom roomId="general" isOn={isOn} />25    </>26  );27}

1import { useEffect, useRef, useState } from "react";2 3function ChatRoom({ roomId }) {4  const mutedRef = useRef(false);5  const [draft, setDraft] = useState("");6 7  useEffect(() => {8    console.log(`Start: "${roomId}", muted: ${mutedRef.current}`);9    return () => console.log(`Stop: "${roomId}"`);10  }, [roomId, mutedRef.current]);11 12  return (13    <>14      <button onClick={() => (mutedRef.current = !mutedRef.current)}>Mute</button>{" "}15      <input aria-label="Message" value={draft} onChange={(event) => setDraft(event.target.value)} />16    </>17  );18}19 20export default function App() {21  return <ChatRoom roomId="general" />;22}

1import { useEffect, useState } from "react";2 3function ChatRoom({ roomId }) {4  const [muted, setMuted] = useState(false);5  const [draft, setDraft] = useState("");6 7  useEffect(() => {8    console.log(`Start: "${roomId}", muted: ${muted}`);9    return () => console.log(`Stop: "${roomId}"`);10  }, [roomId, muted]);11 12  return (13    <>14      <button onClick={() => setMuted(!muted)}>Mute</button>{" "}15      <input aria-label="Message" value={draft} onChange={(event) => setDraft(event.target.value)} />16    </>17  );18}19 20export default function App() {21  return <ChatRoom roomId="general" />;22}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3import { logVisit } from "./analytics.js";4 5function ChatRoom({ roomId }) {6  const [useBackup, setUseBackup] = useState(false);7  const serverUrl = useBackup ? "https://backup.example.com" : "https://chat.example.com";8 9  useEffect(() => {10    logVisit(roomId);11    const connection = createConnection(serverUrl, roomId);12    connection.connect();13    return () => connection.disconnect();14  }, [serverUrl, roomId]);15 16  return (17    <>18      <h3>Welcome to the {roomId} room</h3>19      <label>20        <input type="checkbox" checked={useBackup} onChange={() => setUseBackup(!useBackup)} /> Use the backup server21      </label>22    </>23  );24}25 26export default function App() {27  const [roomId, setRoomId] = useState("general");28  const [show, setShow] = useState(true);29  return (30    <>31      <p>32        {["general", "travel", "music"].map((room) => (33          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>34        ))}{" "}35        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>36      </p>37      {show && <ChatRoom roomId={roomId} />}38    </>39  );40}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3import { logVisit } from "./analytics.js";4 5function ChatRoom({ roomId }) {6  const [useBackup, setUseBackup] = useState(false);7  const serverUrl = useBackup ? "https://backup.example.com" : "https://chat.example.com";8 9  useEffect(() => {10    logVisit(roomId);11  }, [roomId]);12 13  useEffect(() => {14    const connection = createConnection(serverUrl, roomId);15    connection.connect();16    return () => connection.disconnect();17  }, [serverUrl, roomId]);18 19  return (20    <>21      <h3>Welcome to the {roomId} room</h3>22      <label>23        <input type="checkbox" checked={useBackup} onChange={() => setUseBackup(!useBackup)} /> Use the backup server24      </label>25    </>26  );27}28 29export default function App() {30  const [roomId, setRoomId] = useState("general");31  const [show, setShow] = useState(true);32  return (33    <>34      <p>35        {["general", "travel", "music"].map((room) => (36          <button key={room} aria-pressed={room === roomId} onClick={() => setRoomId(room)}>{room}</button>37        ))}{" "}38        <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>39      </p>40      {show && <ChatRoom roomId={roomId} />}41    </>42  );43}

Check your understanding

Read each effect on its own: what it starts, what it stops, and which values can make it do that again.

Key takeaways

• An effect starts synchronizing and later stops. It can do that many times while its component stays on the page.
• When a dependency changes, React runs the cleanup from the last render, then the effect from the new one.
• Reactive values are props, state, and values worked out from them in the component body.
• Every reactive value an effect reads must be in its list. Leaving one out keeps an old value.
• Module values, set functions, and ref objects aren't reactive. A ref's current value and browser values can't be dependencies.
• The linter is right: fix a warning by changing the code, never by silencing it. Give each synchronization its own effect.

Coming next: Separating events from effects. It shows how an effect can read the latest value of something without starting again when it changes.