Separating events from effects

A chat that reconnects when you change the theme

A chat room connects to its server with an Effect, as in Synchronizing with effects. When the connection is ready, it shows a small notification in the corner, in the page's light or dark colors. The chat.js tab is a pretend server that takes 2 seconds to connect; notifications.js shows the notification and logs it. Wait for the first notification, then click Dark theme and watch the console under the result.

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3import { showNotification } from "./notifications.js";4 5function ChatRoom({ roomId, theme }) {6  useEffect(() => {7    const connection = createConnection(roomId);8    connection.on("connected", () => {9      showNotification(`Connected to ${roomId}`, theme);10    });11    connection.connect();12    return () => connection.disconnect();13  }, [roomId, theme]);14 15  return <h3>Welcome to the {roomId} room</h3>;16}17 18export default function App() {19  const [roomId, setRoomId] = useState("general");20  const [isDark, setIsDark] = useState(false);21 22  return (23    <div className={isDark ? "page dark" : "page"}>24      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>25      <button onClick={() => setIsDark(!isDark)}>{isDark ? "Light theme" : "Dark theme"}</button>26      <ChatRoom roomId={roomId} theme={isDark ? "dark" : "light"} />27    </div>28  );29}

Lines 6 to 13 are one Effect. Line 7 creates a connection to roomId, and line 11 starts connecting. Lines 8 to 10 tell the connection what to do once it's ready: line 9 shows a notification in the current theme. The Effect reads both roomId and theme, so line 13 lists both, as the linter asks.

Clicking Dark theme logs Disconnected from general and Connecting to general..., and 2 seconds later a new notification. The room didn't change. Nobody asked to reconnect. But theme is a dependency, so React ran the cleanup and the whole Effect again. On a real server, that's a dropped connection every time someone changes a setting.

The Effect holds two kinds of logic. Connecting should follow roomId: a new room means a new connection. Showing the notification should only read theme at the moment the chat connects: a new theme means nothing to the connection. This lesson shows how to tell the two apart, and how React 19.2's useEffectEvent moves the second kind out of the Effect, so it stops being a dependency.

Event handlers run on clicks, Effects run to stay in sync

You met the difference in Synchronizing with effects: an event handler runs because the person did something, and an Effect runs because the component is on screen. Here is a sharper way to see it. This chat connects with an Effect and sends with a handler. Type a message, click Send, then click Switch room.

1import { useEffect, useState } from "react";2import { createConnection, sendMessage } 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  function handleSend() {14    sendMessage(roomId, message);15    setMessage("");16  }17 18  return (19    <div>20      <input value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Type a message" />21      <button onClick={handleSend}>Send</button>22    </div>23  );24}25 26export default function App() {27  const [roomId, setRoomId] = useState("general");28 29  return (30    <div>31      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>32      <h3>Room: {roomId}</h3>33      <ChatRoom roomId={roomId} />34    </div>35  );36}

Both pieces of code read the same two values. The Effect on lines 7 to 11 reads roomId; handleSend on lines 13 to 16 reads roomId and message. Yet they behave very differently:

• Typing changes message and renders ChatRoom again, but nothing is sent. Line 14 runs only when you click Send (line 21), and it reads whatever message holds at that moment: Sent to general: Hi.
• Switching rooms changes roomId, and React runs the Effect again on its own: Disconnected from general, then Connecting to travel.... Nobody clicked anything in ChatRoom; the new value was the reason.

How to read the table: each row asks one question, and the two columns answer it for a handler and for an Effect.

Reactive values and reactive logic

React has a name for the values the two pieces of code read. Props, state, and any variable the component body works out from them are reactive values: they can be different on the next render. A value declared outside the component is the same on every render, so it isn't reactive.

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

function ChatRoom({ roomId, theme }) {
  const [message, setMessage] = useState("");
  const title = `Welcome to the ${roomId} room`;
  // …
}

Line 1 declares serverUrl outside ChatRoom: it never changes, so it isn't reactive. The props on line 3, roomId and theme, are reactive. So is the state on line 4, message, and title on line 5, because it's worked out from roomId during each render. This code fragment isn't a whole example, so it doesn't run.

Code that reads reactive values is one of two kinds:

• Logic in an event handler isn't reactive. It reads the values when the person clicks, and it doesn't run again when they change. Typing a new message isn't a reason to send it.
• Logic in an Effect is reactive. Every reactive value it reads is a dependency, and React re-runs it when one changes. A new roomId is exactly the reason to reconnect.

Now look at the overview's chat again. Line 9 sits inside the Effect, so it's reactive, and theme became a dependency of the whole connection. But from the person's side, showing the notification is more like an event: it happens once, at the moment the chat connects, and it should use whatever theme the page has then. That's non-reactive logic stuck inside reactive logic.

Move the non-reactive part into an Effect Event

useEffectEvent is a hook, added as a stable part of React in version 19.2. You pass it a function, and it gives you back an Effect Event: a function you call from inside your Effect, whose code reads the latest props and state without making them dependencies. Here is the chat with the notification moved into one. Click Dark theme again.

1import { useEffect, useEffectEvent, useState } from "react";2import { createConnection } from "./chat.js";3import { showNotification } from "./notifications.js";4 5function ChatRoom({ roomId, theme }) {6  const onConnected = useEffectEvent(() => {7    showNotification(`Connected to ${roomId}`, theme);8  });9 10  useEffect(() => {11    const connection = createConnection(roomId);12    connection.on("connected", () => {13      onConnected();14    });15    connection.connect();16    return () => connection.disconnect();17  }, [roomId]);18 19  return <h3>Welcome to the {roomId} room</h3>;20}21 22export default function App() {23  const [roomId, setRoomId] = useState("general");24  const [isDark, setIsDark] = useState(false);25 26  return (27    <div className={isDark ? "page dark" : "page"}>28      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>29      <button onClick={() => setIsDark(!isDark)}>{isDark ? "Light theme" : "Dark theme"}</button>30      <ChatRoom roomId={roomId} theme={isDark ? "dark" : "light"} />31    </div>32  );33}

Line 1 imports useEffectEvent from react. Lines 6 to 8 create the Effect Event, called onConnected, at the top level of ChatRoom, like any hook. Its code, line 7, is the notification, and it reads roomId and theme. Line 13, inside the Effect, calls onConnected() when the connection is ready. The Effect itself no longer reads theme, so line 17 lists only [roomId], and the linter agrees: Effect Events are never dependencies.

Now Dark theme logs nothing: no disconnect, no reconnect. Click Switch room, and then Light theme before 2 seconds pass. The room change reconnects, as it should, and when the chat connects the notification says Notification (light): Connected to travel: onConnected read the theme the page had at that moment, not when the Effect ran.

Compare the ways to write it in the playground. Pick a version, then switch rooms, change the theme, and press Wait 2 seconds to let the chat connect. Watch Effect runs and the theme of each notification.

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3import { showNotification } from "./notifications.js";4 5function ChatRoom({ roomId, theme }) {6  useEffect(() => {7    const connection = createConnection(roomId);8    connection.on("connected", () => {9      showNotification(`Connected to ${roomId}`, theme);10    });11    connection.connect();12    return () => connection.disconnect();13  }, [roomId, theme]);14 15  return <h3>Welcome to the {roomId} room</h3>;16}17 18export default function App() {19  const [roomId, setRoomId] = useState("general");20  const [isDark, setIsDark] = useState(false);21 22  return (23    <div className={isDark ? "page dark" : "page"}>24      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>25      <button onClick={() => setIsDark(!isDark)}>{isDark ? "Light theme" : "Dark theme"}</button>26      <ChatRoom roomId={roomId} theme={isDark ? "dark" : "light"} />27    </div>28  );29}

With theme in the array, every theme change adds two Effect runs. The middle version is what many people try first: leave theme out and silence the linter with a comment. The chat stops reconnecting, but try switching rooms and then changing the theme before you wait: the notification uses the old theme, marked in the playground. Only the Effect Event both stays connected and shows the right theme.

How to read the table: each row is one way to write the chat, what a theme change does, and which theme the notification uses.

Effect Events read the latest props and state

Why is silencing the linter worse than an Effect Event? Each render creates its own Effect, as a closure over that render's props and state. If theme isn't a dependency, React keeps the Effect from an older render, and so does the callback on line 8. Here is that version, live. Click Switch room, then Dark theme within 2 seconds.

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3import { showNotification } from "./notifications.js";4 5function ChatRoom({ roomId, theme }) {6  useEffect(() => {7    const connection = createConnection(roomId);8    connection.on("connected", () => {9      showNotification(`Connected to ${roomId}`, theme);10    });11    connection.connect();12    return () => connection.disconnect();13    // eslint-disable-next-line react-hooks/exhaustive-deps14  }, [roomId]);15 16  return <h3>Welcome to the {roomId} room</h3>;17}18 19export default function App() {20  const [roomId, setRoomId] = useState("general");21  const [isDark, setIsDark] = useState(false);22 23  return (24    <div className={isDark ? "page dark" : "page"}>25      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>26      <button onClick={() => setIsDark(!isDark)}>{isDark ? "Light theme" : "Dark theme"}</button>27      <ChatRoom roomId={roomId} theme={isDark ? "dark" : "light"} />28    </div>29  );30}

Line 13 tells the linter to stop checking line 14, so theme is missing from the array. Switching rooms ran the Effect while the page was light, and its callback on lines 8 to 10 keeps that render's theme. Changing to dark didn't run the Effect again, so the notification says Notification (light): Connected to travel on a dark page. Worse, the linter can no longer warn you when a later change adds a value the Effect really should react to.

An Effect Event doesn't keep old values. React updates the function behind it each time it commits a render, so a call always runs the latest version, with the latest props and state. That makes Effect Events useful well beyond themes. This product page logs a visit for each page you open, along with how many items are in the cart. Click Add to cart twice, then Cake.

1import { useEffect, useEffectEvent, useState } from "react";2import { logVisit } from "./analytics.js";3 4function ProductPage({ url, itemCount }) {5  const onVisit = useEffectEvent((visitedUrl) => {6    logVisit(visitedUrl, itemCount);7  });8 9  useEffect(() => {10    onVisit(url);11  }, [url]);12 13  return <h3>Page {url}, {itemCount} in the cart</h3>;14}15 16export default function App() {17  const [url, setUrl] = useState("/tea");18  const [itemCount, setItemCount] = useState(0);19 20  return (21    <div>22      <button onClick={() => setUrl("/tea")}>Tea</button>23      <button onClick={() => setUrl("/cake")}>Cake</button>24      <button onClick={() => setItemCount(itemCount + 1)}>Add to cart</button>25      <ProductPage url={url} itemCount={itemCount} />26    </div>27  );28}

The analytics.js tab logs each visit. The page first logs Visit /tea (cart: 0), twice in development. Adding to the cart logs nothing: a fuller cart isn't a new visit. Clicking Cake logs Visit /cake (cart: 2), with the latest count. The Effect on lines 9 to 11 reacts to url, and the Effect Event on lines 5 to 7 reads itemCount without reacting to it.

Notice that line 10 passes url to the Effect Event as an argument, visitedUrl, instead of letting it read url itself. The page's address is part of what happened: a visit to this page. Passing it keeps url in the Effect, where the linter makes sure it stays in the array. It also matters when the call comes later: an argument is the value from when the Effect ran, while a value read inside the Effect Event is the newest one. Exercise 6 shows the difference.

The rules for Effect Events

An Effect Event is a piece of one Effect's code that you've pulled out to the top of the component. That's why its rules are strict: only call it from inside Effects (or from another Effect Event) in the same component, and never pass it anywhere else. React itself enforces the first rule while rendering. Look at the result:

1import { useEffectEvent, useState } from "react";2 3export default function App() {4  const [itemCount, setItemCount] = useState(0);5  const onVisit = useEffectEvent(() => {6    console.log(`Visit with ${itemCount} in the cart`);7  });8 9  onVisit(); // A bug on purpose: calling it while rendering.10 11  return <button onClick={() => setItemCount(itemCount + 1)}>Add to cart</button>;12}

Line 9 calls onVisit() in the component body, so it runs during rendering, and React throws A function wrapped in useEffectEvent can't be called during rendering. Rendering must stay a pure calculation, as you saw in Keeping components pure; code that should run once the component is on screen goes in an Effect.

React doesn't throw for the other wrong places; the linter catches them. The rule is react-hooks/rules-of-hooks from eslint-plugin-react-hooks, version 6.1 or later (6.1 came out with React 19.2; the latest in October 2026 is 7.1.1). Older versions don't know about useEffectEvent. Here is why passing one to another component is wrong. App keeps a count and passes an Effect Event to a Ticker that adds to it every second. Watch the console for a few seconds.

1import { useEffect, useEffectEvent, useState } from "react";2 3function Ticker({ onTick }) {4  useEffect(() => {5    console.log("Ticker started");6    const id = setInterval(() => onTick(), 1000);7    return () => {8      clearInterval(id);9      console.log("Ticker stopped");10    };11  }, [onTick]);12 13  return null;14}15 16export default function App() {17  const [count, setCount] = useState(0);18  const [step, setStep] = useState(1);19  // Don't do this: an Effect Event passed to another component.20  const onTick = useEffectEvent(() => setCount(count + step));21 22  return (23    <div>24      <p>Count: {count}</p>25      <button onClick={() => setStep(step + 1)}>Step: {step}</button>26      <Ticker onTick={onTick} />27    </div>28  );29}

Every second, the console prints Ticker stopped and Ticker started. useEffectEvent on line 20 returns a new function on every render, on purpose. Line 26 passes it to Ticker, whose Effect lists it on line 11. Each tick changes count, App renders again, onTick is a new function, and React restarts the timer. The count still climbs, but the ticker never runs for more than a second. The fix is to keep the Effect Event next to the Effect that calls it:

1import { useEffect, useEffectEvent, useState } from "react";2 3function Ticker({ onTick }) {4  const onEachTick = useEffectEvent(onTick);5 6  useEffect(() => {7    console.log("Ticker started");8    const id = setInterval(() => onEachTick(), 1000);9    return () => {10      clearInterval(id);11      console.log("Ticker stopped");12    };13  }, []);14 15  return null;16}17 18export default function App() {19  const [count, setCount] = useState(0);20  const [step, setStep] = useState(1);21  const onTick = () => setCount(count + step);22 23  return (24    <div>25      <p>Count: {count}</p>26      <button onClick={() => setStep(step + 1)}>Step: {step}</button>27      <Ticker onTick={onTick} />28    </div>29  );30}

Now App passes a plain function (line 21). Ticker wraps the prop in its own Effect Event on line 4, and its Effect on lines 6 to 13 calls onEachTick() and lists nothing, so the console prints Ticker started only when the ticker appears. Click Step a few times: the count jumps by the new step at the next tick, because the Effect Event reads the latest onTick, and with it the latest count and step.

The last rule is about intent. Don't use an Effect Event to hide a value the Effect should react to:

function ProductPage({ url }) {
  const onVisit = useEffectEvent(() => {
    logVisit(url);
  });

  useEffect(() => {
    onVisit();
  }, []);
  // …
}

Lines 2 to 4 read url inside the Effect Event, and line 8 gives the Effect an empty array. The linter is happy, but a new url is a new visit, and nothing logs it. The visit logger above passes url from an Effect with [url]. Ask what should cause the code to run again, and keep those values in the Effect.

How to read the table: each row is a place you might call an Effect Event, whether it's allowed, and what happens.

A support chat with all three kinds of code

A real component often uses all three. This support chat sends with a handler, stays connected with an Effect, and shows each reply with an Effect Event that reads the theme and the mute setting. Type Where is my tea?, press Send, and wait for the reply. Then click Mute and Dark theme, and send another.

1import { useEffect, useEffectEvent, useState } from "react";2import { createConnection, sendMessage } from "./chat.js";3import { showNotification } from "./notifications.js";4 5function SupportChat({ roomId, theme, muted }) {6  const [text, setText] = useState("");7 8  const onReply = useEffectEvent((reply) => {9    if (!muted) showNotification(reply, theme);10  });11 12  useEffect(() => {13    const connection = createConnection(roomId);14    connection.on("message", (reply) => onReply(reply));15    connection.connect();16    return () => connection.disconnect();17  }, [roomId]);18 19  function handleSend(e) {20    e.preventDefault();21    sendMessage(roomId, text);22    setText("");23  }24 25  return (26    <form onSubmit={handleSend}>27      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Type a message" />28      <button>Send</button>29    </form>30  );31}32 33export default function App() {34  const [roomId, setRoomId] = useState("orders");35  const [isDark, setIsDark] = useState(false);36  const [muted, setMuted] = useState(false);37 38  return (39    <div className={isDark ? "page dark" : "page"}>40      <button onClick={() => setRoomId(roomId === "orders" ? "returns" : "orders")}>Room: {roomId}</button>41      <button onClick={() => setIsDark(!isDark)}>{isDark ? "Light theme" : "Dark theme"}</button>42      <button onClick={() => setMuted(!muted)}>{muted ? "Unmute" : "Mute"}</button>43      <SupportChat roomId={roomId} theme={isDark ? "dark" : "light"} muted={muted} />44    </div>45  );46}

handleSend on lines 19 to 23 sends the text, because the submit is the reason. The Effect on lines 12 to 17 keeps the connection on roomId. Line 14 tells the connection to call onReply for each reply, and the Effect Event on lines 8 to 10 decides what to show: nothing when muted, or a notification in the current theme. Muting and changing the theme log nothing, because neither is a dependency. Switching the room reconnects.

Common mix-ups

• "If the Effect re-runs too often, I'll leave the value out of the array." No. The Effect keeps an old value, and the linter can't help you any more. Move the logic that only reads the value into an Effect Event.
• "An Effect Event is just a stable version of my function." No. It's a new function on every render, on purpose. What stays up to date is the code it runs, which always sees the latest props and state.
• "Effect Events are for event handlers." No. They're called only from Effects. A click handler already reads the latest values; it doesn't need one.
• "I can pass an Effect Event to a child or a custom hook." No. Declare it next to the Effect that calls it, in the same component or hook, and pass plain functions around.
• "useEffectEvent lets me empty my dependency array." No. Values that should make the Effect run again stay in the Effect and in the array. Only logic that should not react moves out.
• "Logic in an Effect Event never sees new values." No. It's the other way round: it always sees the newest values. It just doesn't make the Effect run again when they change.

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.

1import { useEffect, useEffectEvent, useState } from "react";2import { createConnection } from "./chat.js";3import { showNotification } from "./notifications.js";4 5function ChatRoom({ roomId, theme }) {6  const onConnected = useEffectEvent(() => {7    showNotification(`Connected to ${roomId}`, theme);8  });9 10  useEffect(() => {11    const connection = createConnection(roomId);12    connection.on("connected", () => {13      onConnected();14    });15    connection.connect();16    return () => connection.disconnect();17  }, [roomId]);18 19  return <h3>Welcome to the {roomId} room</h3>;20}21 22export default function App() {23  const [roomId, setRoomId] = useState("general");24  const [isDark, setIsDark] = useState(false);25 26  return (27    <div className={isDark ? "page dark" : "page"}>28      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>29      <button onClick={() => setIsDark(!isDark)}>{isDark ? "Light theme" : "Dark theme"}</button>30      <ChatRoom roomId={roomId} theme={isDark ? "dark" : "light"} />31    </div>32  );33}

1import { useEffect, useEffectEvent, useState } from "react";2import { createConnection } from "./chat.js";3import { showNotification } from "./notifications.js";4 5function ChatRoom({ roomId, theme }) {6  const onConnected = useEffectEvent(() => {7    showNotification(`Connected to ${roomId}`, theme);8  });9 10  useEffect(() => {11    const connection = createConnection(roomId);12    connection.on("connected", () => {13      onConnected();14    });15    connection.connect();16    return () => connection.disconnect();17  }, [roomId]);18 19  return <h3>Welcome to the {roomId} room</h3>;20}21 22export default function App() {23  const [roomId, setRoomId] = useState("general");24  const [isDark, setIsDark] = useState(false);25 26  return (27    <div className={isDark ? "page dark" : "page"}>28      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>29      <button onClick={() => setIsDark(!isDark)}>{isDark ? "Light theme" : "Dark theme"}</button>30      <ChatRoom roomId={roomId} theme={isDark ? "dark" : "light"} />31    </div>32  );33}

1import { useEffect, useState } from "react";2import { sendMessage } from "./chat.js";3 4export default function App() {5  const [message, setMessage] = useState("");6 7  useEffect(() => {8    if (message !== "") {9      sendMessage("general", message);10    }11  }, [message]);12 13  return (14    <div>15      <input value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Type a message" />16      <button>Send</button>17    </div>18  );19}

1import { useState } from "react";2import { sendMessage } from "./chat.js";3 4export default function App() {5  const [message, setMessage] = useState("");6 7  function handleSend() {8    sendMessage("general", message);9    setMessage("");10  }11 12  return (13    <div>14      <input value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Type a message" />15      <button onClick={handleSend}>Send</button>16    </div>17  );18}

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3import { showNotification } from "./notifications.js";4 5function ChatRoom({ roomId, muted }) {6  useEffect(() => {7    const connection = createConnection(roomId);8    connection.on("connected", () => {9      if (!muted) showNotification(`Connected to ${roomId}`, "light");10    });11    connection.connect();12    return () => connection.disconnect();13  }, [roomId, muted]);14 15  return <h3>Welcome to the {roomId} room</h3>;16}17 18export default function App() {19  const [roomId, setRoomId] = useState("general");20  const [muted, setMuted] = useState(false);21 22  return (23    <div className="page">24      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>25      <button onClick={() => setMuted(!muted)}>{muted ? "Unmute" : "Mute"}</button>26      <ChatRoom roomId={roomId} muted={muted} />27    </div>28  );29}

1import { useEffect, useEffectEvent, useState } from "react";2import { createConnection } from "./chat.js";3import { showNotification } from "./notifications.js";4 5function ChatRoom({ roomId, muted }) {6  const onConnected = useEffectEvent(() => {7    if (!muted) showNotification(`Connected to ${roomId}`, "light");8  });9 10  useEffect(() => {11    const connection = createConnection(roomId);12    connection.on("connected", () => {13      onConnected();14    });15    connection.connect();16    return () => connection.disconnect();17  }, [roomId]);18 19  return <h3>Welcome to the {roomId} room</h3>;20}21 22export default function App() {23  const [roomId, setRoomId] = useState("general");24  const [muted, setMuted] = useState(false);25 26  return (27    <div className="page">28      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>29      <button onClick={() => setMuted(!muted)}>{muted ? "Unmute" : "Mute"}</button>30      <ChatRoom roomId={roomId} muted={muted} />31    </div>32  );33}

1import { useEffect, useState } from "react";2import { logVisit } from "./analytics.js";3 4function ProductPage({ url, itemCount }) {5  useEffect(() => {6    logVisit(url, itemCount);7  }, [url, itemCount]);8 9  return <h3>Page {url}, {itemCount} in the cart</h3>;10}11 12export default function App() {13  const [url, setUrl] = useState("/tea");14  const [itemCount, setItemCount] = useState(0);15 16  return (17    <div>18      <button onClick={() => setUrl("/tea")}>Tea</button>19      <button onClick={() => setUrl("/cake")}>Cake</button>20      <button onClick={() => setItemCount(itemCount + 1)}>Add to cart</button>21      <ProductPage url={url} itemCount={itemCount} />22    </div>23  );24}

1import { useEffect, useEffectEvent, useState } from "react";2import { logVisit } from "./analytics.js";3 4function ProductPage({ url, itemCount }) {5  const onVisit = useEffectEvent((visitedUrl) => {6    logVisit(visitedUrl, itemCount);7  });8 9  useEffect(() => {10    onVisit(url);11  }, [url]);12 13  return <h3>Page {url}, {itemCount} in the cart</h3>;14}15 16export default function App() {17  const [url, setUrl] = useState("/tea");18  const [itemCount, setItemCount] = useState(0);19 20  return (21    <div>22      <button onClick={() => setUrl("/tea")}>Tea</button>23      <button onClick={() => setUrl("/cake")}>Cake</button>24      <button onClick={() => setItemCount(itemCount + 1)}>Add to cart</button>25      <ProductPage url={url} itemCount={itemCount} />26    </div>27  );28}

1import { useEffect, useEffectEvent, useState } from "react";2 3function Ticker({ onTick }) {4  useEffect(() => {5    console.log("Ticker started");6    const id = setInterval(() => onTick(), 1000);7    return () => {8      clearInterval(id);9      console.log("Ticker stopped");10    };11  }, [onTick]);12 13  return null;14}15 16export default function App() {17  const [count, setCount] = useState(0);18  const [step, setStep] = useState(1);19  // Don't do this: an Effect Event passed to another component.20  const onTick = useEffectEvent(() => setCount(count + step));21 22  return (23    <div>24      <p>Count: {count}</p>25      <button onClick={() => setStep(step + 1)}>Step: {step}</button>26      <Ticker onTick={onTick} />27    </div>28  );29}

1import { useEffect, useEffectEvent, useState } from "react";2 3function Ticker({ onTick }) {4  const onEachTick = useEffectEvent(onTick);5 6  useEffect(() => {7    console.log("Ticker started");8    const id = setInterval(() => onEachTick(), 1000);9    return () => {10      clearInterval(id);11      console.log("Ticker stopped");12    };13  }, []);14 15  return null;16}17 18export default function App() {19  const [count, setCount] = useState(0);20  const [step, setStep] = useState(1);21  const onTick = () => setCount(count + step);22 23  return (24    <div>25      <p>Count: {count}</p>26      <button onClick={() => setStep(step + 1)}>Step: {step}</button>27      <Ticker onTick={onTick} />28    </div>29  );30}

1import { useEffect, useEffectEvent, useState } from "react";2import { logVisit } from "./analytics.js";3 4function ProductPage({ url, itemCount }) {5  const onVisit = useEffectEvent(() => {6    logVisit(url, itemCount);7  });8 9  useEffect(() => {10    // Log the visit 2 seconds later, even if the person has moved on.11    setTimeout(() => onVisit(), 2000);12  }, [url]);13 14  return <h3>Page {url}</h3>;15}16 17export default function App() {18  const [url, setUrl] = useState("/tea");19 20  return (21    <div>22      <button onClick={() => setUrl("/tea")}>Tea</button>23      <button onClick={() => setUrl("/cake")}>Cake</button>24      <ProductPage url={url} itemCount={2} />25    </div>26  );27}

1import { useEffect, useEffectEvent, useState } from "react";2import { logVisit } from "./analytics.js";3 4function ProductPage({ url, itemCount }) {5  const onVisit = useEffectEvent((visitedUrl) => {6    logVisit(visitedUrl, itemCount);7  });8 9  useEffect(() => {10    // Log the visit 2 seconds later, even if the person has moved on.11    setTimeout(() => onVisit(url), 2000);12  }, [url]);13 14  return <h3>Page {url}</h3>;15}16 17export default function App() {18  const [url, setUrl] = useState("/tea");19 20  return (21    <div>22      <button onClick={() => setUrl("/tea")}>Tea</button>23      <button onClick={() => setUrl("/cake")}>Cake</button>24      <ProductPage url={url} itemCount={2} />25    </div>26  );27}

Check your understanding

Key takeaways

• Event handlers run because of one interaction. Effects run, and run again, to stay in sync with the values they read.
• Props, state, and values worked out from them during render are reactive. Every one an Effect reads is a dependency.
• Logic that should only read a value, not react to it, goes in an Effect Event: useEffectEvent(fn), part of React since 19.2.
• An Effect Event always sees the latest props and state, and it's never a dependency.
• Call it only from Effects in the same component. Calling it while rendering throws; handlers, props, and arrays are flagged by the linter.
• Pass the parts of the event as arguments, and never use an Effect Event to hide a real dependency.

Coming next: Removing effect dependencies. It collects every way to make an Effect re-run less often by changing its code, Effect Events included.