Synchronizing with effects

A chat room that connects when it appears

A support chat has to connect to the chat server while it's on the screen, and disconnect when it goes. No click causes the connection: the chat being there is the reason. React has a place for code like this, called an Effect. Here is a chat room with one. The chat.js tab is a pretend server that logs every connection and counts how many are open. Click Open the chat, watch the console under the result, then click Close the chat.

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

Line 1 imports useEffect. Lines 5 to 9 call it with a function, and that function is the Effect: line 6 creates a connection to the general room, and line 7 connects. The function it returns on line 8 is the cleanup, which disconnects. The [] on line 9 says when to run it, which you'll meet below. App shows ChatRoom only while open is true (line 20).

Opening the chat logs Connected to general. Open connections: 1, then a disconnect and a second connect, ending at one connection. The extra pair is a development-only check that the last section of this lesson explains. Closing the chat logs Disconnected from general. Open connections: 0: React ran the cleanup because ChatRoom left the page.

Rendering code, event handlers, and Effects

Code inside a component sits in one of three places, and each runs at a different time. Rendering code at the top of the component works out the JSX from props and state; it must stay pure, a calculation that changes nothing. Event handlers, from Responding to events, run when the person does something, and they may change things: sending a message is caused by a click on Send. Effects run because the component is on the page.

How to read the table: each row is one place for code, when React runs it, and what it's for.

Why not connect right in the component body? Try it: this version connects while rendering, a bug on purpose. Type a few letters in the box and watch the console.

1import { useState } from "react";2import { createConnection } from "./chat.js";3 4export default function App() {5  const [message, setMessage] = useState("");6 7  // A bug on purpose: connecting while rendering.8  const connection = createConnection("general");9  connection.connect();10 11  return (12    <label>13      Message <input value={message} onChange={(e) => setMessage(e.target.value)} />14    </label>15  );16}

Lines 8 and 9 run on every render. The first render logs two connections (StrictMode renders twice in development), and every letter you type renders App again, so the count climbs by two per key. Nothing ever disconnects, because rendering code has no way to know when to stop. Worse, React may call a component many times before it commits, or throw a render away. Effects fix all of this: they run after the commit, at most once per committed render, and they come with a cleanup.

Writing an Effect with useEffect

Call useEffect at the top level of a component, like useState, and pass it a function. React doesn't run that function during the render. It saves it, puts the render on the page, and runs it afterwards. You can see the order with a ref from Manipulating the DOM with refs. Look at the console, then click Add a cup.

1import { useEffect, useRef, useState } from "react";2 3export default function App() {4  const [cups, setCups] = useState(0);5  const headingRef = useRef(null);6 7  useEffect(() => {8    console.log("Effect: the page says", headingRef.current.textContent);9  });10 11  console.log("Render: the page says", headingRef.current?.textContent ?? "nothing yet");12 13  return (14    <div>15      <h3 ref={headingRef}>Cups: {cups}</h3>16      <button onClick={() => setCups(cups + 1)}>Add a cup</button>17    </div>18  );19}

The Effect is written first, on lines 7 to 9, but line 11 prints first: Render: the page says nothing yet, because during the first render the <h3> on line 15 doesn't exist. Then the Effect prints Effect: the page says Cups: 0. By the time it runs, React has committed the heading, and the ref holds it. Each line shows a small 2: StrictMode renders twice and runs the new Effect twice in development.

Click Add a cup. The render still sees Cups: 0 on the page, and the Effect sees Cups: 1. This Effect has no second argument, so it runs after every render.

You may read that Effects run "after the paint", once the browser has drawn the new screen. Treat that as a rule of thumb. React only promises that Effects run after the commit. After a click or a key press, React runs them straight after the commit, before the browser paints. After other updates, like a timer, React runs them a little later, so the browser can paint first if a new frame is due. Layout effects and timing, later in this stage, shows when that difference matters, and The commit phase shows it in React's code.

"After every render" has a trap. An Effect that sets state with no array causes a render, which runs the Effect, which sets state again, forever:

const [count, setCount] = useState(0);

useEffect(() => {
  setCount(count + 1);
});

Line 4 changes count after every render, and each change causes another render. React warns in the console with Maximum update depth exceeded. If an Effect only sets state from other state, with nothing outside React involved, it usually shouldn't be an Effect at all; the next lesson, You might not need an Effect, shows what to write instead.

Dependencies decide when an Effect runs again

Reconnecting after every render is wasteful: typing a message shouldn't reconnect the chat. The second argument to useEffect, the dependency array, lists the values the Effect reads from the component. After each render, React compares each one with its value from the last render, using Object.is, and skips the Effect when none changed. Type a message, then click Switch room.

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  const [message, setMessage] = useState("");6 7  useEffect(() => {8    const connection = createConnection(roomId);9    connection.connect();10    return () => connection.disconnect();11  }, [roomId]);12 13  return (14    <label>15      Message to {roomId}{" "}16      <input value={message} onChange={(e) => setMessage(e.target.value)} />17    </label>18  );19}20 21export default function App() {22  const [roomId, setRoomId] = useState("general");23  const [open, setOpen] = useState(true);24 25  return (26    <div>27      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>28      <button onClick={() => setOpen(!open)}>{open ? "Close the chat" : "Open the chat"}</button>29      <p>{open ? <ChatRoom roomId={roomId} /> : "The chat is closed."}</p>30    </div>31  );32}

ChatRoom now takes the room as a prop (line 4), and the Effect connects to it (line 8). Line 11 lists [roomId], because the Effect reads roomId. Typing in the box on line 16 changes message and renders ChatRoom again, but roomId is the same, so the console stays quiet. Switch room (line 27) changes it: React runs the old cleanup, Disconnected from general, then the Effect, Connected to travel. Still one connection open.

You don't choose the dependencies; the code does. Every prop, state variable, or value worked out from them that the Effect reads must be in the array. React's linter rule, react-hooks/exhaustive-deps, checks this and warns about any you leave out. Two kinds of value can be left out because they never change: a ref from useRef, and a set function from useState. To make an Effect run less often, change its code, not the list; later lessons in this stage show how.

Try the three kinds of array in the playground. Pick one, then type a letter, switch rooms, and close and reopen the chat. Switch between development and production to see what StrictMode adds.

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  const [message, setMessage] = useState("");6 7  useEffect(() => {8    const connection = createConnection(roomId);9    connection.connect();10    return () => connection.disconnect();11  }, [roomId]);12 13  return (14    <label>15      Message to {roomId}{" "}16      <input value={message} onChange={(e) => setMessage(e.target.value)} />17    </label>18  );19}20 21export default function App() {22  const [roomId, setRoomId] = useState("general");23  const [open, setOpen] = useState(true);24 25  return (26    <div>27      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>28      <button onClick={() => setOpen(!open)}>{open ? "Close the chat" : "Open the chat"}</button>29      <p>{open ? <ChatRoom roomId={roomId} /> : "The chat is closed."}</p>30    </div>31  );32}

With no array, every letter you type logs a disconnect and a connect. With [], switching rooms logs nothing at all: the heading says travel, but the chat is still connected to general. That's the bug a missing dependency causes, and the reason the linter insists. With [roomId], the Effect runs exactly when it needs to.

How to read the table: each row is a way to write the array, when React runs the Effect, and when it's right.

Cleanup stops what the Effect started

The function an Effect returns is its cleanup. React runs it in two cases: before it runs the Effect again, and when the component leaves the page. That's why the chat never piles up connections: every connect has a matching disconnect.

Each cleanup belongs to one run of the Effect. It's a closure made during that render, so it sees that render's roomId. When you switch to travel, the cleanup that runs is the one from the general render, and it disconnects from general, as it should.

Timers need cleanup too. This page counts how long you've been reading, but its Effect forgets to stop the timer. Watch the number for a few seconds.

1import { useEffect, useState } from "react";2 3export default function App() {4  const [seconds, setSeconds] = useState(0);5 6  useEffect(() => {7    setInterval(() => {8      setSeconds((s) => s + 1);9    }, 1000);10  }, []);11 12  return <p>You've been reading for {seconds} seconds.</p>;13}

Lines 7 to 9 start a setInterval that adds 1 every second. Line 8 passes an updater function, (s) => s + 1, so each tick adds to the latest value; the lesson on queueing state updates explains why. The number goes up by 2 each second. In development, StrictMode set the Effect up twice, and with nothing to stop the first timer, two timers are running. Here is the fix:

1import { useEffect, useState } from "react";2 3export default function App() {4  const [seconds, setSeconds] = useState(0);5 6  useEffect(() => {7    const id = setInterval(() => {8      setSeconds((s) => s + 1);9    }, 1000);10    return () => clearInterval(id);11  }, []);12 13  return <p>You've been reading for {seconds} seconds.</p>;14}

Line 7 keeps the timer's id, and line 10 returns a cleanup that stops it with clearInterval(id). StrictMode still starts a timer, stops it, and starts another, but only one is ever running, so the number goes up by 1 each second.

Why Effects run twice in development

Every live example on this page renders inside <StrictMode>, as a new React project does. In development, when a component appears, StrictMode runs each Effect's setup, then its cleanup, then the setup again, as if the component had been removed and put back at once. Production builds don't do this.

It's a test. People really do leave a page and come back, and components really do disappear and reappear, so the question is whether your cleanup puts things back as they were. If it does, setup, cleanup, setup ends in the same place as one setup. If it doesn't, the bug shows up right away, while you're developing. Here is the chat without its cleanup. Click Open the chat, then close it and open it again.

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

Opening logs Open connections: 1, then 2: the extra setup connected again, and nothing disconnected. Closing logs nothing. Opening again logs 3 and 4. In production you'd see one connection per opening, but closing would still leave each one open, so they'd pile up just the same, only more slowly. StrictMode made the leak easy to see.

The fix is the cleanup from the first example. A tempting wrong fix is to stop the second run with a ref, so the console looks right:

1import { useEffect, useRef, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom() {5  const connected = useRef(false);6 7  useEffect(() => {8    // Hiding the second run instead of fixing it (don't do this).9    if (connected.current) return;10    connected.current = true;11    const connection = createConnection("general");12    connection.connect();13  }, []);14 15  return <h3>Welcome to the general room</h3>;16}17 18export default function App() {19  const [open, setOpen] = useState(false);20 21  return (22    <div>23      <button onClick={() => setOpen(!open)}>{open ? "Close the chat" : "Open the chat"}</button>24      {open && <ChatRoom />}25    </div>26  );27}

Lines 9 and 10 skip the Effect if it has run before, so opening logs only Open connections: 1. But close and reopen: 2. Closing never disconnected, and a reopened ChatRoom is a brand-new component with a new ref, so the leak is still there; it's just hidden. Removing <StrictMode> hides it the same way. Fix the cleanup instead.

How to read the table: each row is a common job for an Effect, the setup it does, and the cleanup that undoes it.

The last row has no cleanup on purpose. Some Effects are fine to run twice in development, like sending a page visit to an analytics service: the extra visit happens only on your machine. Code that must never run twice, like buying a product, doesn't belong in an Effect: it belongs in the Buy button's event handler.

A support chat with two Effects

A real component often syncs with more than one thing. This support chat stays connected to the room you pick, and shows whether your browser is online. Pick the orders room, type a message, and press Send.

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4export default function App() {5  const [roomId, setRoomId] = useState("general");6  const [online, setOnline] = useState(window.navigator.onLine);7  const [text, setText] = useState("");8 9  useEffect(() => {10    const handleOnline = () => setOnline(true);11    const handleOffline = () => setOnline(false);12    window.addEventListener("online", handleOnline);13    window.addEventListener("offline", handleOffline);14    return () => {15      window.removeEventListener("online", handleOnline);16      window.removeEventListener("offline", handleOffline);17    };18  }, []);19 20  useEffect(() => {21    const connection = createConnection(roomId);22    connection.connect();23    return () => connection.disconnect();24  }, [roomId]);25 26  function handleSend(e) {27    e.preventDefault();28    console.log(`Sent to ${roomId}: ${text}`);29    setText("");30  }31 32  return (33    <form onSubmit={handleSend}>34      <select value={roomId} onChange={(e) => setRoomId(e.target.value)}>35        <option value="general">general</option>36        <option value="orders">orders</option>37      </select>38      <span>{online ? " Online " : " Offline "}</span>39      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Type a message" />40      <button>Send</button>41    </form>42  );43}

The first Effect, lines 9 to 18, subscribes to the browser's online and offline events on window, and its cleanup removes both listeners. It reads no props or state, so its array is []. Line 6 starts online from window.navigator.onLine. The second Effect, lines 20 to 24, is the chat connection, with [roomId]. Each Effect does one job, with its own dependencies.

Sending is not an Effect. It's caused by the submit, so handleSend on lines 26 to 30 logs the message and empties the box. Picking a room logs a disconnect and a connect; typing and sending log neither.

Common mix-ups

• "An Effect runs while the component renders." No. It runs after React commits the render to the page, so it can use refs and the DOM.
• "[] means run once, ever." No. It runs each time the component appears, cleans up each time it goes, and gets the extra pair in development.
• "I choose what goes in the dependency array." No. Every prop and state value the Effect reads goes in. To run it less often, change the code.
• "The cleanup only runs when the component goes away." No. It also runs before every re-run of the Effect, with the old values.
• "Effects running twice is a bug, so I'll guard them with a ref." No. It's a development check. Write the cleanup, and the second run does no harm.
• "Everything that changes something belongs in an Effect." No. What a person did belongs in an event handler, and calculations belong in rendering.

Practice exercises

Each exercise shows its result under the code, or when you press Edit & run, with the console under it. Change the code, and the result runs again as you type. Make a guess first, then use the hints.

import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    console.log("B: the Effect");
  });

  console.log("A: the render");

  return <p>Hello, Asha</p>;
}

1import { useEffect } from "react";2 3export default function App() {4  useEffect(() => {5    console.log("B: the Effect");6  });7 8  console.log("A: the render");9 10  return <p>Hello, Asha</p>;11}

1import { useEffect, useState } from "react";2 3function logView(tab) {4  console.log("Viewed:", tab);5}6 7export default function App() {8  const [tab, setTab] = useState("details");9 10  useEffect(() => {11    logView(tab);12  }, []);13 14  return (15    <div>16      <button onClick={() => setTab("details")}>Details</button>17      <button onClick={() => setTab("reviews")}>Reviews</button>18      <p>Showing the {tab} tab.</p>19    </div>20  );21}

1import { useEffect, useState } from "react";2 3function logView(tab) {4  console.log("Viewed:", tab);5}6 7export default function App() {8  const [tab, setTab] = useState("details");9 10  useEffect(() => {11    logView(tab);12  }, [tab]);13 14  return (15    <div>16      <button onClick={() => setTab("details")}>Details</button>17      <button onClick={() => setTab("reviews")}>Reviews</button>18      <p>Showing the {tab} tab.</p>19    </div>20  );21}

1import { useEffect, useState } from "react";2 3export default function App() {4  const [left, setLeft] = useState(10);5 6  useEffect(() => {7    setInterval(() => {8      setLeft((s) => Math.max(s - 1, 0));9    }, 1000);10  }, []);11 12  return <p>Flash sale ends in {left} seconds.</p>;13}

1import { useEffect, useState } from "react";2 3export default function App() {4  const [left, setLeft] = useState(10);5 6  useEffect(() => {7    const id = setInterval(() => {8      setLeft((s) => Math.max(s - 1, 0));9    }, 1000);10    return () => clearInterval(id);11  }, []);12 13  return <p>Flash sale ends in {left} seconds.</p>;14}

1import { useEffect, useRef } from "react";2 3export default function App() {4  const searchRef = useRef(null);5 6  useEffect(() => {7    function handleKey(e) {8      if (e.key !== "/") return;9      e.preventDefault();10      console.log("Focus the search");11      searchRef.current.focus();12    }13    window.addEventListener("keydown", handleKey);14  }, []);15 16  return <input ref={searchRef} placeholder="Press / to search teas" />;17}

1import { useEffect, useRef } from "react";2 3export default function App() {4  const searchRef = useRef(null);5 6  useEffect(() => {7    function handleKey(e) {8      if (e.key !== "/") return;9      e.preventDefault();10      console.log("Focus the search");11      searchRef.current.focus();12    }13    window.addEventListener("keydown", handleKey);14    return () => window.removeEventListener("keydown", handleKey);15  }, []);16 17  return <input ref={searchRef} placeholder="Press / to search teas" />;18}

1import { useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  // Connect to roomId while ChatRoom is on the page.6 7  return <h3>Welcome to the {roomId} room</h3>;8}9 10export default function App() {11  const [roomId, setRoomId] = useState("general");12 13  return (14    <div>15      <select value={roomId} onChange={(e) => setRoomId(e.target.value)}>16        <option value="general">general</option>17        <option value="travel">travel</option>18      </select>19      <ChatRoom roomId={roomId} />20    </div>21  );22}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  useEffect(() => {6    const connection = createConnection(roomId);7    connection.connect();8    return () => connection.disconnect();9  }, [roomId]);10 11  return <h3>Welcome to the {roomId} room</h3>;12}13 14export default function App() {15  const [roomId, setRoomId] = useState("general");16 17  return (18    <div>19      <select value={roomId} onChange={(e) => setRoomId(e.target.value)}>20        <option value="general">general</option>21        <option value="travel">travel</option>22      </select>23      <ChatRoom roomId={roomId} />24    </div>25  );26}

1import { useEffect, useState } from "react";2import { fetchProduct } from "./api.js";3 4export default function App() {5  const [id, setId] = useState("tea");6  const [product, setProduct] = useState(null);7 8  useEffect(() => {9    fetchProduct(id).then((result) => {10      setProduct(result);11    });12  }, [id]);13 14  return (15    <div>16      <button onClick={() => setId("tea")}>Tea</button>17      <button onClick={() => setId("cake")}>Cake</button>18      <p>Picked: {id}. Showing: {product ? product.name : "loading…"}</p>19    </div>20  );21}

1import { useEffect, useState } from "react";2import { fetchProduct } from "./api.js";3 4export default function App() {5  const [id, setId] = useState("tea");6  const [product, setProduct] = useState(null);7 8  useEffect(() => {9    let ignore = false;10    fetchProduct(id).then((result) => {11      if (!ignore) setProduct(result);12    });13    return () => {14      ignore = true;15    };16  }, [id]);17 18  return (19    <div>20      <button onClick={() => setId("tea")}>Tea</button>21      <button onClick={() => setId("cake")}>Cake</button>22      <p>Picked: {id}. Showing: {product ? product.name : "loading…"}</p>23    </div>24  );25}

Check your understanding

Key takeaways

• An Effect keeps a component in sync with something outside React: a connection, a timer, a browser event, a widget.
• React runs Effects after it commits a render, so they can use refs and the DOM.
• The dependency array lists what the Effect reads. No array runs after every render, [] when the component appears, [roomId] also when roomId changes.
• The cleanup runs before each re-run and when the component goes. Every setup needs one that undoes it.
• In development, StrictMode runs setup, cleanup, setup when a component appears. Fix the cleanup; don't hide the run.
• Something a person did belongs in an event handler, and a calculation belongs in rendering.

Coming next: You might not need an effect.