You might not need an effect

A full name that arrives one render late

An effect is code you hand to useEffect. React runs it after a render has reached the page, and again after later renders when one of its dependencies, the values in the array you pass second, has changed. Synchronizing with effects teaches how to write one. This lesson is about when not to.

Effects are tempting for any "when this changes, update that". Here is a gift card that keeps a full name up to date that way. The result is live, and the console under it lists every render and every effect run.

1import { useEffect, useState } from "react";2 3export default function GiftCard() {4  const [firstName, setFirstName] = useState("Asha");5  const [lastName, setLastName] = useState("Rao");6  const [fullName, setFullName] = useState("");7  console.log(`Render: card says "${fullName}"`);8 9  useEffect(() => {10    console.log("Effect: set fullName");11    setFullName(firstName + " " + lastName);12  }, [firstName, lastName]);13 14  return (15    <>16      <p>17        <label>First name <input value={firstName} onChange={(event) => setFirstName(event.target.value)} /></label>18      </p>19      <p>20        <label>Last name <input value={lastName} onChange={(event) => setLastName(event.target.value)} /></label>21      </p>22      <p>Gift card for: <strong>{fullName}</strong></p>23    </>24  );25}

Lines 4 and 5 keep the first and last name in state. Line 6 keeps a third piece of state, fullName, starting empty. Line 7 prints a line on every render. Lines 9 to 12 are the effect: after a render where firstName or lastName changed, line 11 sets fullName from them.

Read the console. First comes Render: card says "" with a small 2 beside it: every live example here runs in StrictMode, which calls each component twice in development to catch mistakes (Keeping components pure explains it), so read a 2 as one render. Then Effect: set fullName, also twice, because StrictMode also starts a new component's effects twice. Only then Render: card says "Asha Rao". The first render put an empty card on the page.

Now click at the end of First name and type one letter, say n. The count beside Render: card says "Asha Rao" goes from 2 to 4: the first render after your key still has the old name. Then come Effect: set fullName and Render: card says "Ashan Rao". Every key costs two renders. Here is the same card with the full name worked out in the component body instead:

1import { useState } from "react";2 3export default function GiftCard() {4  const [firstName, setFirstName] = useState("Asha");5  const [lastName, setLastName] = useState("Rao");6  const fullName = firstName + " " + lastName;7  console.log(`Render: card says "${fullName}"`);8 9  return (10    <>11      <p>12        <label>First name <input value={firstName} onChange={(event) => setFirstName(event.target.value)} /></label>13      </p>14      <p>15        <label>Last name <input value={lastName} onChange={(event) => setLastName(event.target.value)} /></label>16      </p>17      <p>Gift card for: <strong>{fullName}</strong></p>18    </>19  );20}

Line 6 is the whole change: const fullName = firstName + " " + lastName;. No third state, no effect. The console starts with Render: card says "Asha Rao", and each letter you type adds one render with the new name. The value is ready in the same render that needs it, because React runs the whole component body on every render.

Will you see the old name flash? Sometimes. After a key press, React runs the effect before the browser paints, the step where it draws the new screen. But the render the effect asks for with setFullName comes in a later piece of work, and the browser can paint the old name in between if a new frame is due. On a fast computer that frame is gone in a few milliseconds, so you rarely notice it. On the first render, which no key caused, the browser may paint the empty card before the effect fills it in. Either way, the extra render and commit happen on every key, and anything slow in them slows typing. Layout effects and timing, later in this stage, shows this gap with a tooltip.

What an unneeded effect costs

An effect that sets state, when nothing outside React is involved, costs you three things:

• An extra render and commit, every time it runs.
• One render with out-of-date values, which reaches the page.
• More state to keep in step, and more code to read to find out why a value changed.

The playground runs three small components twice: once with an effect, once without. Pick a case, use both versions, and compare their logs. Each line is a real render, effect run, or handler call, in order.

const [fullName, setFullName] = useState("");

useEffect(() => {
  setFullName(firstName + " " + lastName);
}, [firstName, lastName]);

const fullName = firstName + " " + lastName;

Full name is the gift card from above: two renders per key with the effect, one without. In Stamp card, the third Buy a tea runs three effects in a row: four renders against one, and one of them puts a full card of 3 stamps on the page. In Gift wrap, the parent hears about one tick twice, and the toggle renders before the total catches up. The stamp card and the gift wrap get their own sections below, with the full code.

Calculate during render, and cache slow work

The fix for the full name works for anything made from props and state: a count, a total, a filtered list. This tea search filters its list in the component body. filterTeas lives in teas.js, in the second tab.

1import { useState } from "react";2import { teas, filterTeas } from "./teas.js";3 4export default function TeaSearch() {5  const [query, setQuery] = useState("");6  const [isLarge, setIsLarge] = useState(false);7  const visibleTeas = filterTeas(teas, query);8 9  return (10    <div style={{ fontSize: isLarge ? "1.25em" : "1em" }}>11      <label>Search <input value={query} onChange={(event) => setQuery(event.target.value)} /></label>{" "}12      <button onClick={() => setIsLarge(!isLarge)}>Larger text</button>13      <ul>14        {visibleTeas.map((tea) => <li key={tea}>{tea}</li>)}15      </ul>16    </div>17  );18}

In teas.js, line 1 is the list and lines 3 to 6 are filterTeas: line 4 prints a line each time it runs, and line 5 keeps the teas whose name contains the search text. In App.jsx, line 7 calls it on every render, and line 14 shows the result.

Type gr in the box. The list shows Green tea, and the console prints filterTeas ran for "gr". Now press Larger text. The list didn't change, but filterTeas ran again: the button changed isLarge, React rendered TeaSearch, and every render runs line 7.

For five teas that costs nothing. For 5,000 products, it might. You might reach for an effect that filters only when the search text changes:

const [visibleTeas, setVisibleTeas] = useState([]);

useEffect(() => {
  setVisibleTeas(filterTeas(teas, query));
}, [query]);

That fragment of TeaSearch isn't meant to run on its own. It's the gift card's mistake again: an empty list on the first render, and two renders for every key. What you want is to keep the calculation in the render and skip it when its input is the same. That's useMemo:

1import { useMemo, useState } from "react";2import { teas, filterTeas } from "./teas.js";3 4export default function TeaSearch() {5  const [query, setQuery] = useState("");6  const [isLarge, setIsLarge] = useState(false);7  const visibleTeas = useMemo(() => filterTeas(teas, query), [query]);8 9  return (10    <div style={{ fontSize: isLarge ? "1.25em" : "1em" }}>11      <label>Search <input value={query} onChange={(event) => setQuery(event.target.value)} /></label>{" "}12      <button onClick={() => setIsLarge(!isLarge)}>Larger text</button>13      <ul>14        {visibleTeas.map((tea) => <li key={tea}>{tea}</li>)}15      </ul>16    </div>17  );18}

Line 7 wraps the call: useMemo(() => filterTeas(teas, query), [query]). On the first render, React calls the function and keeps its result. On each later render, it compares query with last time. Same value: it hands back the kept list without calling anything. New value: it calls the function again and keeps the new result.

Type gr, then press Larger text. The console stays quiet. Type another letter and it runs again. (StrictMode calls the function twice when it does run, in development, like the component itself.)

• useMemo runs during render, so the function must be pure: work out a value, and change nothing outside it.
• It doesn't make the first render faster. It only skips repeated work on later renders.
• Use it for slow work. To find out, wrap the call in console.time("filter") and console.timeEnd("filter"); if it takes a millisecond or more, caching can help.

When a prop changes: a key, or less state

A review form for two shops. You type a comment and give some stars, then switch shops. The comment should start fresh for the new shop, so this version clears it in an effect when shopName changes:

1import { useEffect, useState } from "react";2 3function Stars() {4  const [stars, setStars] = useState(0);5  return <p>Stars: {stars} <button onClick={() => setStars(stars + 1)}>Add a star</button></p>;6}7 8function Review({ shopName }) {9  const [comment, setComment] = useState("");10  console.log(`Render: ${shopName}, comment "${comment}"`);11 12  useEffect(() => {13    setComment("");14  }, [shopName]);15 16  return (17    <>18      <h3>Review {shopName}</h3>19      <label>Comment <input value={comment} onChange={(event) => setComment(event.target.value)} /></label>20      <Stars />21    </>22  );23}24 25export default function App() {26  const [shop, setShop] = useState("Tea Corner");27  return (28    <>29      <button onClick={() => setShop("Tea Corner")}>Tea Corner</button>{" "}30      <button onClick={() => setShop("Cake Shop")}>Cake Shop</button>31      <Review shopName={shop} />32    </>33  );34}

Stars (lines 3 to 6) keeps its own count of stars. Review (lines 8 to 23) keeps the comment, and lines 12 to 14 clear it after a render where shopName changed. App (lines 25 to 34) switches the shop with two buttons.

Type a comment, press Add a star twice, then press Cake Shop. Two things go wrong. The console prints Render: Cake Shop, comment "…" with your Tea Corner comment: a render of the Cake Shop review with the wrong text, before the effect clears it. And Stars still says 2. The effect clears the comment and nothing else; every new piece of state, in Review or below it, would need its own line.

(The first key you type prints its render line 4 times, not 2. The effect's setComment("") on the first render changed nothing, and React's useState reference notes that React may then still call a component once more before it skips it. That call never reaches the page; it's one more render the effect costs.)

React already has a way to say "this is a different review now": a key. React keeps a component's state while the same component stays at the same place with the same key. Change the key, and React treats it as a new component (Preserving and resetting state shows this in detail):

1import { useState } from "react";2 3function Stars() {4  const [stars, setStars] = useState(0);5  return <p>Stars: {stars} <button onClick={() => setStars(stars + 1)}>Add a star</button></p>;6}7 8function Review({ shopName }) {9  const [comment, setComment] = useState("");10  console.log(`Render: ${shopName}, comment "${comment}"`);11 12  return (13    <>14      <h3>Review {shopName}</h3>15      <label>Comment <input value={comment} onChange={(event) => setComment(event.target.value)} /></label>16      <Stars />17    </>18  );19}20 21export default function App() {22  const [shop, setShop] = useState("Tea Corner");23  return (24    <>25      <button onClick={() => setShop("Tea Corner")}>Tea Corner</button>{" "}26      <button onClick={() => setShop("Cake Shop")}>Cake Shop</button>27      <Review key={shop} shopName={shop} />28    </>29  );30}

The effect is gone, and line 27 passes key={shop}. When shop changes, React removes the old Review, with its Stars and all their state, and creates new ones. Try the same steps: one render, Render: Cake Shop, comment "", and Stars: 0. Back to Tea Corner, and that review starts fresh too.

Sometimes only part of the state should change. This tea picker clears the picked tea when the list changes from green teas to black teas:

1import { useEffect, useState } from "react";2 3const menu = { Green: ["Sencha", "Matcha"], Black: ["Assam", "Darjeeling"] };4 5function TeaList({ teas }) {6  const [selection, setSelection] = useState(null);7  console.log(`Render: ${teas.join(", ")}; picked ${selection ?? "nothing"}`);8 9  useEffect(() => {10    setSelection(null);11  }, [teas]);12 13  return (14    <ul>15      {teas.map((tea) => (16        <li key={tea}>17          <button onClick={() => setSelection(tea)}>{tea}</button> {tea === selection && "(picked)"}18        </li>19      ))}20    </ul>21  );22}23 24export default function App() {25  const [kind, setKind] = useState("Green");26  return (27    <>28      <button onClick={() => setKind("Green")}>Green teas</button>{" "}29      <button onClick={() => setKind("Black")}>Black teas</button>30      <TeaList teas={menu[kind]} />31    </>32  );33}

Line 6 keeps the picked tea, and lines 9 to 11 set it back to null after a render with a new teas list. Press Sencha, then Black teas. The console prints Render: Assam, Darjeeling; picked Sencha: a render where the picked tea isn't on the list. Then the effect runs, and picked nothing follows. Instead, store only what you can't work out, and work out the rest:

1import { useState } from "react";2 3const menu = { Green: ["Sencha", "Matcha"], Black: ["Assam", "Darjeeling"] };4 5function TeaList({ teas }) {6  const [pickedName, setPickedName] = useState(null);7  const selection = teas.includes(pickedName) ? pickedName : null;8  console.log(`Render: ${teas.join(", ")}; picked ${selection ?? "nothing"}`);9 10  return (11    <ul>12      {teas.map((tea) => (13        <li key={tea}>14          <button onClick={() => setPickedName(tea)}>{tea}</button> {tea === selection && "(picked)"}15        </li>16      ))}17    </ul>18  );19}20 21export default function App() {22  const [kind, setKind] = useState("Green");23  return (24    <>25      <button onClick={() => setKind("Green")}>Green teas</button>{" "}26      <button onClick={() => setKind("Black")}>Black teas</button>27      <TeaList teas={menu[kind]} />28    </>29  );30}

Line 6 keeps the name you pressed. Line 7 works out the picked tea: that name if it's on the current list, null if not. Press Sencha, then Black teas: one render, nothing picked. Press Green teas, and Sencha is picked again, because the name was kept. If you want it forgotten instead, clear pickedName in the category buttons' click handlers: switching is an event.

As a last resort, React lets a component set its own state during render, when a prop is different from the one it saw last time. This fragment of TeaList isn't meant to run alone:

const [selection, setSelection] = useState(null);
const [prevTeas, setPrevTeas] = useState(teas);
if (teas !== prevTeas) {
  setPrevTeas(teas);
  setSelection(null);
}

Line 2 remembers the list from the last render. When line 3 finds a new list, React throws away this render's result and renders TeaList again straight away, before its children and before anything reaches the page. That's better than an effect, but harder to follow than a key or storing less, so reach for those first.

Code caused by a click belongs in the handler

A product page shows a toast, a short message, when green tea goes into the cart. This version shows it from an effect that watches inCart:

1import { useEffect, useState } from "react";2 3function ProductPage({ inCart, onAdd }) {4  useEffect(() => {5    if (inCart) {6      console.log("Toast: Green tea is in your cart!");7    }8  }, [inCart]);9 10  function handleAdd() {11    onAdd();12  }13 14  function handleBuyNow() {15    onAdd();16    console.log("Go to checkout");17  }18 19  return (20    <>21      <h3>Green tea</h3>22      <button onClick={handleAdd} disabled={inCart}>Add to cart</button>{" "}23      <button onClick={handleBuyNow}>Buy now</button>24    </>25  );26}27 28export default function App() {29  const [inCart, setInCart] = useState(false);30  const [page, setPage] = useState("product");31  return (32    <>33      <nav>34        <button onClick={() => setPage("product")}>Product</button>{" "}35        <button onClick={() => setPage("help")}>Help</button>36      </nav>37      {page === "product" ? <ProductPage inCart={inCart} onAdd={() => setInCart(true)} /> : <p>Ask us anything about tea.</p>}38    </>39  );40}

Lines 4 to 8 show the toast after any render where inCart is true and changed. Both buttons call onAdd (lines 11 and 15), and App keeps inCart (line 29) and which page is open (line 30).

Press Add to cart: one toast in the console. So far so good. Now press Help, then Product. The toast shows again, twice in development, and you didn't add anything. The product page was created again with inCart already true, and an effect only knows what's true now, not what happened. Press Buy now: no toast at all, because inCart didn't change.

1import { useState } from "react";2 3function ProductPage({ inCart, onAdd }) {4  function addToCart() {5    onAdd();6    console.log("Toast: Green tea is in your cart!");7  }8 9  function handleAdd() {10    addToCart();11  }12 13  function handleBuyNow() {14    addToCart();15    console.log("Go to checkout");16  }17 18  return (19    <>20      <h3>Green tea</h3>21      <button onClick={handleAdd} disabled={inCart}>Add to cart</button>{" "}22      <button onClick={handleBuyNow}>Buy now</button>23    </>24  );25}26 27export default function App() {28  const [inCart, setInCart] = useState(false);29  const [page, setPage] = useState("product");30  return (31    <>32      <nav>33        <button onClick={() => setPage("product")}>Product</button>{" "}34        <button onClick={() => setPage("help")}>Help</button>35      </nav>36      {page === "product" ? <ProductPage inCart={inCart} onAdd={() => setInCart(true)} /> : <p>Ask us anything about tea.</p>}37    </>38  );39}

Lines 4 to 7 put the shared work, adding and showing the toast, in one function, addToCart. Both handlers call it (lines 10 and 14). Now Help and Product show no toast, and Buy now shows one every time you press it.

The question to ask is why the code runs. If it runs because the person did something, it's event code: put it in that event's handler. If it runs because the component is on the screen, an effect may fit. Each row asks one question of both:

The same question sorts requests to a server. This sign-up form sends two. post, in api.js, prints each request instead of sending it.

1import { useEffect, useState } from "react";2import { post } from "./api.js";3 4export default function SignupForm() {5  const [email, setEmail] = useState("");6 7  // Runs because the form was shown: an effect is right.8  useEffect(() => {9    post("/analytics/event", { name: "saw_signup_form" });10  }, []);11 12  // Runs because the person pressed Join: the handler is right.13  function handleSubmit(event) {14    event.preventDefault();15    post("/api/signup", { email });16  }17 18  return (19    <form onSubmit={handleSubmit}>20      <label>Email <input value={email} onChange={(event) => setEmail(event.target.value)} /></label>{" "}21      <button>Join</button>22    </form>23  );24}

Lines 8 to 10 send an analytics event because the form was shown: nothing was clicked, so an effect is right. The console shows it twice, because StrictMode creates the form twice in development; a real visit sends it once. Lines 13 to 16 send the sign-up because the person pressed Join: type an email and press Join, and one POST /api/signup appears. Here is the same request sent from an effect, a fragment that isn't meant to run on its own:

const [jsonToSubmit, setJsonToSubmit] = useState(null);

useEffect(() => {
  if (jsonToSubmit !== null) {
    post("/api/signup", jsonToSubmit);
  }
}, [jsonToSubmit]);

function handleSubmit(event) {
  event.preventDefault();
  setJsonToSubmit({ email });
}

The submit handler only stores the data (line 11), and the effect sends it after the next render (lines 3 to 7). That's an extra state and an extra render, and the request is no longer tied to the press that caused it.

Effects that set state can also start each other. This stamp card gives a free tea for every 3 teas, with one effect per step:

1import { useEffect, useState } from "react";2 3export default function StampCard() {4  const [cups, setCups] = useState(0);5  const [stamps, setStamps] = useState(0);6  const [freeTeas, setFreeTeas] = useState(0);7  const [message, setMessage] = useState("Buy 3 teas, get 1 free.");8  console.log(`Render: ${stamps} stamps, ${freeTeas} free`);9 10  useEffect(() => {11    if (cups === 0) return;12    console.log("Effect 1: add a stamp");13    setStamps((count) => count + 1);14  }, [cups]);15 16  useEffect(() => {17    if (stamps < 3) return;18    console.log("Effect 2: swap 3 stamps for a free tea");19    setStamps(0);20    setFreeTeas((count) => count + 1);21  }, [stamps]);22 23  useEffect(() => {24    if (freeTeas === 0) return;25    console.log("Effect 3: update the message");26    setMessage(`You have ${freeTeas} free tea${freeTeas === 1 ? "" : "s"}!`);27  }, [freeTeas]);28 29  return (30    <>31      <p>Stamps: {stamps} of 3</p>32      <p>{message}</p>33      <button onClick={() => setCups(cups + 1)}>Buy a tea</button>34    </>35  );36}

The button (line 33) only counts cups. Effect 1 (lines 10 to 14) adds a stamp when cups changes. Effect 2 (lines 16 to 21) swaps 3 stamps for a free tea when stamps changes. Effect 3 (lines 23 to 27) writes the message when freeTeas changes. Press Buy a tea three times and read the third press in the console: a render, Effect 1, a render with 3 stamps, Effect 2, a render with a free tea, Effect 3, and a last render. Four renders for one press, and one of them puts a card with 3 of 3 stamps on the page.

1import { useState } from "react";2 3export default function StampCard() {4  const [stamps, setStamps] = useState(0);5  const [freeTeas, setFreeTeas] = useState(0);6  console.log(`Render: ${stamps} stamps, ${freeTeas} free`);7 8  function buyTea() {9    if (stamps + 1 === 3) {10      setStamps(0);11      setFreeTeas(freeTeas + 1);12    } else {13      setStamps(stamps + 1);14    }15  }16 17  const message = freeTeas === 0 ? "Buy 3 teas, get 1 free." : `You have ${freeTeas} free tea${freeTeas === 1 ? "" : "s"}!`;18 19  return (20    <>21      <p>Stamps: {stamps} of 3</p>22      <p>{message}</p>23      <button onClick={buyTea}>Buy a tea</button>24    </>25  );26}

buyTea (lines 8 to 15) works out every new value at once: on the third stamp it sets the stamps to 0 and adds a free tea, otherwise it adds a stamp. Line 17 calculates the message during render. Each press is one render. A chain of effects is still right when each step talks to something outside React, like a form whose second list of options loads from a server after you pick from the first.

Tell the parent in the same event

A gift wrap checkbox keeps its own isOn state and tells its parent, Checkout, through an onChange prop, so the total can include the wrapping. This version tells the parent from an effect:

1import { useEffect, useState } from "react";2 3function GiftWrapToggle({ onChange }) {4  const [isOn, setIsOn] = useState(false);5  console.log(`Render Toggle: ${isOn ? "on" : "off"}`);6 7  useEffect(() => {8    console.log("Effect: tell the parent");9    onChange(isOn);10  }, [isOn, onChange]);11 12  return (13    <label>14      <input type="checkbox" checked={isOn} onChange={() => setIsOn(!isOn)} /> Gift wrap (+$1)15    </label>16  );17}18 19export default function Checkout() {20  const [giftWrap, setGiftWrap] = useState(false);21  const total = 3 + (giftWrap ? 1 : 0);22  console.log(`Render Checkout: total $${total}`);23 24  function handleWrapChange(isOn) {25    console.log(`Parent heard: ${isOn ? "on" : "off"}`);26    setGiftWrap(isOn);27  }28 29  return (30    <>31      <p>Green tea: $3</p>32      <GiftWrapToggle onChange={handleWrapChange} />33      <p>Total: ${total}</p>34    </>35  );36}

Lines 7 to 10 call onChange(isOn) after any render where isOn or onChange changed. In Checkout, handleWrapChange (lines 24 to 27) prints what it heard and sets giftWrap, and line 21 works out the total.

Before you click anything, the console already says Parent heard: off, twice: the effect runs when the toggle first appears, and StrictMode runs it again. Now tick Gift wrap. The toggle renders on while the total is still $3. Then the effect tells the parent, the parent renders with $4, and the toggle renders again. Each render of Checkout makes a new handleWrapChange function, so onChange changed, and the effect tells the parent a second time. React renders Checkout once more and finds nothing changed.

1import { useState } from "react";2 3function GiftWrapToggle({ onChange }) {4  const [isOn, setIsOn] = useState(false);5  console.log(`Render Toggle: ${isOn ? "on" : "off"}`);6 7  function handleClick() {8    const next = !isOn;9    setIsOn(next);10    onChange(next);11  }12 13  return (14    <label>15      <input type="checkbox" checked={isOn} onChange={handleClick} /> Gift wrap (+$1)16    </label>17  );18}19 20export default function Checkout() {21  const [giftWrap, setGiftWrap] = useState(false);22  const total = 3 + (giftWrap ? 1 : 0);23  console.log(`Render Checkout: total $${total}`);24 25  function handleWrapChange(isOn) {26    console.log(`Parent heard: ${isOn ? "on" : "off"}`);27    setGiftWrap(isOn);28  }29 30  return (31    <>32      <p>Green tea: $3</p>33      <GiftWrapToggle onChange={handleWrapChange} />34      <p>Total: ${total}</p>35    </>36  );37}

handleClick (lines 7 to 11) works out the new value once, sets it, and tells the parent in the same event. React batches set calls from one event into one render (Queueing state updates), so the console shows Parent heard: on, then one render of each component, with the total already $4. Nothing is heard when the page loads.

Another way is to move the state up: Checkout keeps giftWrap and passes it down as an isOn prop, so there's only one copy to keep in step (Sharing state between components).

The same goes for data. Here a child reads the saved address and hands it up to its parent from an effect:

1import { useEffect, useState } from "react";2import { loadSavedAddress } from "./address.js";3 4function AddressLine({ onLoad }) {5  const [address] = useState(() => loadSavedAddress());6 7  useEffect(() => {8    onLoad(address);9  }, [address, onLoad]);10 11  return <p>Address: {address}</p>;12}13 14export default function Delivery() {15  const [address, setAddress] = useState(null);16  console.log(`Render Delivery: ships to ${address ?? "nowhere yet"}`);17 18  return (19    <>20      <AddressLine onLoad={setAddress} />21      <p>Ships to: {address ?? "…"}</p>22    </>23  );24}

AddressLine reads the address (line 5) and sends it up (lines 7 to 9). The console shows Render Delivery: ships to nowhere yet, then a second render with 12 Park Street: the parent waits a whole render for data its child had from the start. Data in React flows down, from parents to children, so let the parent get it:

1import { useState } from "react";2import { loadSavedAddress } from "./address.js";3 4function AddressLine({ address }) {5  return <p>Address: {address}</p>;6}7 8export default function Delivery() {9  const [address] = useState(() => loadSavedAddress());10  console.log(`Render Delivery: ships to ${address ?? "nowhere yet"}`);11 12  return (13    <>14      <AddressLine address={address} />15      <p>Ships to: {address ?? "…"}</p>16    </>17  );18}

Line 9 reads the address in Delivery, and line 14 passes it to AddressLine as a prop. One render, and both lines show the address. When you wonder where a value came from, you only have to look up the tree.

When an effect is the right tool

Some code really is about the world outside React: a sign-in check, a browser setting, a server. Three cases: one that looks like an effect but shouldn't be one, one with a hook built for the job, and one where an effect is right, with a cleanup.

Code that runs once when the app starts. This app checks a saved sign-in token. In auth.js, the token works once, like the token in a sign-in link: the second check finds nothing.

1import { useEffect } from "react";2import { checkSavedLogin } from "./auth.js";3 4export default function App() {5  useEffect(() => {6    checkSavedLogin();7  }, []);8 9  return <p>Welcome back to Tea Corner.</p>;10}

Lines 5 to 7 check the token after the first render. The console says Signed in with token tea-123, then No token left: you are signed out. In development, StrictMode runs App's effects, cleans them up, and runs them again, as if App had been removed and put back, to check that its effects can run twice. This effect can't. A real app rarely creates App twice, but any component can be, so code that must run once per page load doesn't belong in a component's effect:

1import { useEffect } from "react";2import { checkSavedLogin } from "./auth.js";3 4let didInit = false;5 6export default function App() {7  useEffect(() => {8    if (didInit) return;9    didInit = true;10    checkSavedLogin();11  }, []);12 13  return <p>Welcome back to Tea Corner.</p>;14}

Line 4 is a variable in the module, outside the component, so it lives as long as the page, not as long as one App. Lines 8 and 9 make the second run stop early. The console shows one sign-in. You can also call checkSavedLogin() at the top of the module, outside any component; it runs once, when the file is first imported. Keep such code in the app's main file, so importing a component never starts anything.

Data that lives outside React. Whether the browser is online lives in navigator.onLine, and the browser fires online and offline events when it changes. You can copy it into state by hand:

const [isOnline, setIsOnline] = useState(true);

useEffect(() => {
  function update() {
    setIsOnline(navigator.onLine);
  }
  update();
  window.addEventListener("online", update);
  window.addEventListener("offline", update);
  return () => {
    window.removeEventListener("online", update);
    window.removeEventListener("offline", update);
  };
}, []);

That fragment works, but it's state that copies something else, kept up to date by an effect. React has a hook for exactly this, useSyncExternalStore:

1import { useSyncExternalStore } from "react";2 3function subscribe(onStoreChange) {4  window.addEventListener("online", onStoreChange);5  window.addEventListener("offline", onStoreChange);6  return () => {7    window.removeEventListener("online", onStoreChange);8    window.removeEventListener("offline", onStoreChange);9  };10}11 12export default function CartStatus() {13  const isOnline = useSyncExternalStore(subscribe, () => navigator.onLine);14  console.log(`Render: ${isOnline ? "online" : "offline"}`);15 16  return <p>{isOnline ? "Online: your cart is saved." : "Offline: your cart saves when you reconnect."}</p>;17}

Lines 3 to 10 say how to listen: subscribe adds the two listeners, and returns a function that removes them. Line 13 passes it to useSyncExternalStore, with a function that reads the current value. React subscribes while the component is on screen, reads the value during every render, and renders again when a listener fires. To see it change, turn off your Wi-Fi, or open Chrome's DevTools, go to the Network tab, and choose Offline. The Subscribing to external stores lesson covers the hook in full.

Data from a server. Search results must match the text in the box, and the server is outside React. That's synchronizing, so an effect is right. In api.js, shorter searches take longer: 1100 ms for one letter, 700 for two, 300 for three or more.

1import { useEffect, useState } from "react";2import { searchTeas } from "./api.js";3 4export default function TeaSearch() {5  const [query, setQuery] = useState("");6  const [results, setResults] = useState(null);7 8  useEffect(() => {9    if (!query) return;10    console.log(`Fetch "${query}"`);11    searchTeas(query).then((teas) => {12      console.log(`Show results for "${query}"`);13      setResults({ query, teas });14    });15  }, [query]);16 17  return (18    <>19      <label>Search <input value={query} onChange={(event) => setQuery(event.target.value)} /></label>20      {results && <p>Results for "{results.query}": {results.teas.join(", ") || "none"}</p>}21    </>22  );23}

Lines 8 to 15 start a search after each render where query changed, and line 13 shows its results when they arrive. Type gre quickly. The console prints three fetches, then the answers in the reverse order: "gre" first, "g" last. The page ends on Results for "g", with Ginger tea in it, though the box says gre. That's a race condition: the answer that arrives last wins, not the one you asked for last.

1import { useEffect, useState } from "react";2import { searchTeas } from "./api.js";3 4export default function TeaSearch() {5  const [query, setQuery] = useState("");6  const [results, setResults] = useState(null);7 8  useEffect(() => {9    if (!query) return;10    let ignore = false;11    console.log(`Fetch "${query}"`);12    searchTeas(query).then((teas) => {13      if (ignore) {14        console.log(`Ignore results for "${query}"`);15        return;16      }17      console.log(`Show results for "${query}"`);18      setResults({ query, teas });19    });20    return () => {21      ignore = true;22    };23  }, [query]);24 25  return (26    <>27      <label>Search <input value={query} onChange={(event) => setQuery(event.target.value)} /></label>28      {results && <p>Results for "{results.query}": {results.teas.join(", ") || "none"}</p>}29    </>30  );31}

Line 10 makes an ignore flag for this one search. Lines 20 to 22 are the cleanup: React calls it before it runs the effect again for a new query, and when the search box leaves the screen. It sets that search's flag to true, and lines 13 to 16 drop its answer when it arrives. Each effect run keeps its own flag, because each then callback remembers the ignore of the run that made it (a closure). Type gre quickly again: Ignore results for "gr" and "g", and the page shows Green tea for "gre".

Fetching in effects has more problems to solve, like caching and loading while the page is built on the server. Frameworks and data libraries solve them, and Fetching data covers them later.

Cleaning up a checkout page

Real components collect effects over time. This checkout has two: one keeps the total, and one sends the order once it's placed.

1import { useEffect, useState } from "react";2 3const prices = { tea: 3, cake: 4 };4 5export default function Checkout() {6  const [cart, setCart] = useState({ tea: 1, cake: 0 });7  const [total, setTotal] = useState(0);8  const [isPlaced, setIsPlaced] = useState(false);9  console.log(`Render: total $${total}`);10 11  useEffect(() => {12    setTotal(cart.tea * prices.tea + cart.cake * prices.cake);13  }, [cart]);14 15  useEffect(() => {16    if (isPlaced) {17      console.log(`POST /api/orders: $${total}`);18    }19  }, [isPlaced, total]);20 21  return (22    <>23      <p>Tea: {cart.tea}, cake: {cart.cake}. Total: ${total}</p>24      <button onClick={() => setCart({ ...cart, cake: cart.cake + 1 })}>Add cake</button>{" "}25      <button onClick={() => setIsPlaced(true)}>Place order</button>26      {isPlaced && <p>Order placed.</p>}27    </>28  );29}

Lines 11 to 13 copy the total into state, and lines 15 to 19 send the order after any render where isPlaced is true and isPlaced or total changed. Press Place order: POST /api/orders: $3. Now press Add cake. The console prints POST /api/orders: $7: a second order nobody placed, sent because the total changed while isPlaced was true.

1import { useState } from "react";2 3const prices = { tea: 3, cake: 4 };4 5export default function Checkout() {6  const [cart, setCart] = useState({ tea: 1, cake: 0 });7  const [isPlaced, setIsPlaced] = useState(false);8  const total = cart.tea * prices.tea + cart.cake * prices.cake;9  console.log(`Render: total $${total}`);10 11  function placeOrder() {12    console.log(`POST /api/orders: $${total}`);13    setIsPlaced(true);14  }15 16  return (17    <>18      <p>Tea: {cart.tea}, cake: {cart.cake}. Total: ${total}</p>19      <button onClick={() => setCart({ ...cart, cake: cart.cake + 1 })}>Add cake</button>{" "}20      <button onClick={placeOrder}>Place order</button>21      {isPlaced && <p>Order placed.</p>}22    </>23  );24}

Line 8 calculates the total. placeOrder (lines 11 to 14) sends the order because the button was pressed, once. Place order, then Add cake: one order, and the page shows the new total in one render.

When you meet an effect in your own code, ask these three questions, in order:

Each row is one effect you might write, and what to write instead:

Common mix-ups

• "Effects are how you react to a change in state." No. Rendering already reacts: every change renders the component again with the new values. Effects keep a component in step with something outside React.
• "An effect with the right dependencies is fine." No. It can be correct and still cost an extra render, put old values on the page for one render, and run at times no event explains, like the toast on returning to the page.
• "useMemo is an effect that runs before rendering." No. It runs during rendering, must be pure, and only skips a calculation whose inputs didn't change.
• "A key is only for lists." No. Any component can take a key, and a new key gives it fresh state.
• "An effect that runs twice in development is a bug in React." No. StrictMode does it on purpose. If running twice breaks your effect, like the one-time token, the code usually doesn't belong in an effect.
• "Fetching in an effect is always wrong." No. Keeping results in step with the screen is synchronizing. Give the effect a cleanup that ignores old answers.

Practice exercises

Each exercise runs live. Read the console under the result: a small number beside a line counts StrictMode's repeats.

import { useEffect, useState } from "react";

export default function Cart() {
  const [items, setItems] = useState([]);
  const [count, setCount] = useState(0);
  console.log(`Render: count ${count}`);

  useEffect(() => {
    setCount(items.length);
  }, [items]);

  return (
    <>
      <p>Items: {count}</p>
      <button onClick={() => setItems([...items, "Tea"])}>Add tea</button>
    </>
  );
}

1import { useState } from "react";2 3export default function Cart() {4  const [items, setItems] = useState([]);5  const count = items.length;6  console.log(`Render: count ${count}`);7 8  return (9    <>10      <p>Items: {count}</p>11      <button onClick={() => setItems([...items, "Tea"])}>Add tea</button>12    </>13  );14}

1import { useEffect, useState } from "react";2 3export default function Cart() {4  const [items, setItems] = useState([]);5  const [total, setTotal] = useState(0);6 7  useEffect(() => {8    setTotal(items.reduce((sum, item) => sum + item.price, 0));9  }, [items]);10 11  return (12    <>13      <p>Total: ${total}</p>14      <button onClick={() => setItems([...items, { name: "Tea", price: 3 }])}>Add tea</button>{" "}15      <button onClick={() => setItems([...items, { name: "Cake", price: 4 }])}>Add cake</button>16    </>17  );18}

1import { useState } from "react";2 3export default function Cart() {4  const [items, setItems] = useState([]);5  const total = items.reduce((sum, item) => sum + item.price, 0);6 7  return (8    <>9      <p>Total: ${total}</p>10      <button onClick={() => setItems([...items, { name: "Tea", price: 3 }])}>Add tea</button>{" "}11      <button onClick={() => setItems([...items, { name: "Cake", price: 4 }])}>Add cake</button>12    </>13  );14}

1import { useEffect, useState } from "react";2 3function PhotoOption() {4  const [withPhoto, setWithPhoto] = useState(false);5  return (6    <p>7      <label><input type="checkbox" checked={withPhoto} onChange={() => setWithPhoto(!withPhoto)} /> Attach a photo</label>8      {" "}{withPhoto ? "Photo attached" : "No photo"}9    </p>10  );11}12 13function Draft({ contact }) {14  const [text, setText] = useState("");15 16  useEffect(() => {17    setText("");18  }, [contact]);19 20  return (21    <>22      <label>Message to {contact} <input value={text} onChange={(event) => setText(event.target.value)} /></label>23      <PhotoOption />24    </>25  );26}27 28export default function Chat() {29  const [contact, setContact] = useState("Asha");30  return (31    <>32      <button onClick={() => setContact("Asha")}>Asha</button>{" "}33      <button onClick={() => setContact("Ravi")}>Ravi</button>34      <Draft contact={contact} />35    </>36  );37}

1import { useState } from "react";2 3function PhotoOption() {4  const [withPhoto, setWithPhoto] = useState(false);5  return (6    <p>7      <label><input type="checkbox" checked={withPhoto} onChange={() => setWithPhoto(!withPhoto)} /> Attach a photo</label>8      {" "}{withPhoto ? "Photo attached" : "No photo"}9    </p>10  );11}12 13function Draft({ contact }) {14  const [text, setText] = useState("");15 16  return (17    <>18      <label>Message to {contact} <input value={text} onChange={(event) => setText(event.target.value)} /></label>19      <PhotoOption />20    </>21  );22}23 24export default function Chat() {25  const [contact, setContact] = useState("Asha");26  return (27    <>28      <button onClick={() => setContact("Asha")}>Asha</button>{" "}29      <button onClick={() => setContact("Ravi")}>Ravi</button>30      <Draft key={contact} contact={contact} />31    </>32  );33}

1import { useEffect, useState } from "react";2 3function NewsletterBox({ isSubscribed, onSubscribe }) {4  useEffect(() => {5    if (isSubscribed) {6      console.log("Toast: Thanks for subscribing!");7    }8  }, [isSubscribed]);9 10  return (11    <button onClick={onSubscribe} disabled={isSubscribed}>12      {isSubscribed ? "Subscribed" : "Subscribe"}13    </button>14  );15}16 17export default function Footer() {18  // This visitor subscribed last week; the saved setting says so.19  const [isSubscribed, setIsSubscribed] = useState(true);20  return <NewsletterBox isSubscribed={isSubscribed} onSubscribe={() => setIsSubscribed(true)} />;21}

1import { useState } from "react";2 3function NewsletterBox({ isSubscribed, onSubscribe }) {4  function handleClick() {5    onSubscribe();6    console.log("Toast: Thanks for subscribing!");7  }8 9  return (10    <button onClick={handleClick} disabled={isSubscribed}>11      {isSubscribed ? "Subscribed" : "Subscribe"}12    </button>13  );14}15 16export default function Footer() {17  // This visitor subscribed last week; the saved setting says so.18  const [isSubscribed, setIsSubscribed] = useState(true);19  return <NewsletterBox isSubscribed={isSubscribed} onSubscribe={() => setIsSubscribed(true)} />;20}

1import { useEffect, useState } from "react";2 3export default function Rewards() {4  const [points, setPoints] = useState(0);5  const [level, setLevel] = useState("Bronze");6  const [badge, setBadge] = useState("");7  console.log(`Render: ${points} points, ${level}, badge "${badge}"`);8 9  useEffect(() => {10    if (points >= 20) setLevel("Silver");11  }, [points]);12 13  useEffect(() => {14    if (level === "Silver") setBadge("Silver member");15  }, [level]);16 17  return (18    <>19      <p>{points} points. Level: {level} {badge && `(${badge})`}</p>20      <button onClick={() => setPoints(points + 10)}>Buy a cake (+10 points)</button>21    </>22  );23}

1import { useState } from "react";2 3export default function Rewards() {4  const [points, setPoints] = useState(0);5  const level = points >= 20 ? "Silver" : "Bronze";6  const badge = level === "Silver" ? "Silver member" : "";7  console.log(`Render: ${points} points, ${level}, badge "${badge}"`);8 9  return (10    <>11      <p>{points} points. Level: {level} {badge && `(${badge})`}</p>12      <button onClick={() => setPoints(points + 10)}>Buy a cake (+10 points)</button>13    </>14  );15}

1import { useEffect, useState } from "react";2import { searchTeas } from "./api.js";3 4export default function TeaSearch() {5  const [query, setQuery] = useState("");6  const [results, setResults] = useState(null);7 8  useEffect(() => {9    if (!query) return;10    console.log(`Fetch "${query}"`);11    searchTeas(query).then((teas) => {12      console.log(`Show results for "${query}"`);13      setResults({ query, teas });14    });15  }, [query]);16 17  return (18    <>19      <label>Search <input value={query} onChange={(event) => setQuery(event.target.value)} /></label>20      {results && <p>Results for "{results.query}": {results.teas.join(", ") || "none"}</p>}21    </>22  );23}

1import { useEffect, useState } from "react";2import { searchTeas } from "./api.js";3 4export default function TeaSearch() {5  const [query, setQuery] = useState("");6  const [results, setResults] = useState(null);7 8  useEffect(() => {9    if (!query) return;10    let ignore = false;11    console.log(`Fetch "${query}"`);12    searchTeas(query).then((teas) => {13      if (ignore) {14        console.log(`Ignore results for "${query}"`);15        return;16      }17      console.log(`Show results for "${query}"`);18      setResults({ query, teas });19    });20    return () => {21      ignore = true;22    };23  }, [query]);24 25  return (26    <>27      <label>Search <input value={query} onChange={(event) => setQuery(event.target.value)} /></label>28      {results && <p>Results for "{results.query}": {results.teas.join(", ") || "none"}</p>}29    </>30  );31}

Check your understanding

For each question, ask what the code is for: a value made from props and state, something a person did, or keeping in step with the world outside React.

Key takeaways

• An effect that only sets state from other state costs an extra render, and puts old values on the page for one render.
• Calculate values from props and state during render. Wrap slow calculations in useMemo.
• Give a component a key to start it fresh when a prop changes; store less state to avoid adjusting it.
• Code caused by a click, a key, or a submit goes in that event's handler, including telling a parent and sending a form.
• Code that must run once per page load goes outside components; data outside React is read with useSyncExternalStore.
• Effects are for keeping a component in step with something outside React. A fetch is one, and needs a cleanup that ignores old answers.

Coming next: The lifecycle of an effect. It looks at the effects you keep: how each one starts and stops synchronizing, and why every value it reads must be a dependency.