Manipulating the DOM with refs

A search box that a button can focus

React changes the page for you: you describe what it should show, and React creates and updates the elements. Most of the time you never touch them. But a few jobs need the real element, the DOM node: moving the keyboard focus into a box, scrolling to an item, or measuring how big something is. JSX has no prop for those. Here is a search box with a button that puts the cursor in it. Click Find a tea in the result.

1import { useRef } from "react";2 3export default function App() {4  const searchRef = useRef(null);5 6  function handleClick() {7    searchRef.current.focus();8  }9 10  return (11    <div>12      <input ref={searchRef} placeholder="Search teas" />13      <button onClick={handleClick}>Find a tea</button>14    </div>15  );16}

The cursor jumps into the box, and you can type straight away. Line 4 makes a ref: useRef(null) returns an object with one property, current, which starts as null. Line 12 gives that object to the <input> as its ref attribute. That asks React: when you create this input's DOM node, put it in searchRef.current. Line 7, in the click handler, reads the node and calls the browser's own focus() method on it. Line 13 connects the handler to the button.

The ref object is the same one from Referencing values with refs: a box that keeps its current between renders, and that you can change without causing a render. This time you don't write to it yourself. React does.

The ref attribute hands you the DOM node

Every built-in tag in JSX, like <input>, <li>, or <textarea>, takes a ref. Whatever node React makes for it, you can call any browser method on it. A component can hold as many refs as it needs. This shelf of teas scrolls sideways; each button brings one tea into view. Click Mint, then Green.

1import { useRef } from "react";2 3export default function App() {4  const greenRef = useRef(null);5  const chaiRef = useRef(null);6  const mintRef = useRef(null);7 8  function show(ref) {9    ref.current.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });10  }11 12  return (13    <div>14      <button onClick={() => show(greenRef)}>Green</button>15      <button onClick={() => show(chaiRef)}>Chai</button>16      <button onClick={() => show(mintRef)}>Mint</button>17      <ul className="shelf">18        <li ref={greenRef}>Green tea</li>19        <li ref={chaiRef}>Masala chai</li>20        <li ref={mintRef}>Mint tea</li>21      </ul>22    </div>23  );24}

Lines 4 to 6 make one ref per tea, and lines 18 to 20 attach them. The show function on lines 8 to 10 takes a ref and calls scrollIntoView on its node: inline: "center" scrolls the shelf sideways until the item sits in the middle, and block: "nearest" moves the page up or down only if it has to. Each button on lines 14 to 16 passes its own ref. The styles.css tab makes the shelf narrower than its three cards, so it scrolls.

Reading a node is just as useful as calling a method on it. This button measures the note box with getBoundingClientRect(). Click Measure the note, drag the box's corner to resize it, and measure again.

1import { useRef, useState } from "react";2 3export default function App() {4  const noteRef = useRef(null);5  const [size, setSize] = useState("");6 7  function handleMeasure() {8    const box = noteRef.current.getBoundingClientRect();9    setSize(`${Math.round(box.width)} × ${Math.round(box.height)} pixels`);10  }11 12  return (13    <div>14      <textarea ref={noteRef} defaultValue="Extra hot, please." />15      <button onClick={handleMeasure}>Measure the note</button>16      <p>{size === "" ? "Not measured yet." : `The note is ${size}.`}</p>17    </div>18  );19}

Line 8 asks the browser for the box's size and place on the screen, in pixels. Line 9 rounds the width and height and keeps them in state, so line 16 can show them. Your numbers depend on your screen and font. The measuring happens in a click handler, after the box is on the page. A measurement you need without a click belongs in an Effect, which the next lesson, Synchronizing with effects, covers.

How to read the table: each row is a job you might need a DOM node for, the method you call on the ref, and where this lesson uses it.

A ref for every item in a list

Three refs for three teas is fine. But a menu built from an array can have any number of items. You can't call useRef once per item inside map():

{teas.map((name) => {
  const ref = useRef(null); // Not allowed: a hook inside map()
  return <li key={name} ref={ref}>{name}</li>;
})}

Hooks like useRef must be called at the top level of a component, the same number of times on every render. React matches them up by their order, so a list that grows or shrinks would break that order. (The Rules of Hooks lesson explains why.)

Instead, pass a function as the ref. This is a ref callback. React calls it with the node when it adds the item to the page, and calls the function it returns, its cleanup, when it takes the item away. With it, one ref can hold a Map from each tea's name to its node. Click any tea name in the result:

1import { useRef } from "react";2 3const teas = ["Assam", "Chai", "Darjeeling", "Earl Grey", "Green", "Jasmine", "Mint", "Oolong"];4 5export default function App() {6  const itemsRef = useRef(new Map());7 8  function scrollToTea(name) {9    const node = itemsRef.current.get(name);10    node.scrollIntoView({ behavior: "smooth", block: "nearest" });11  }12 13  return (14    <div>15      <nav>16        {teas.map((name) => (17          <button key={name} onClick={() => scrollToTea(name)}>{name}</button>18        ))}19      </nav>20      <ul className="menu">21        {teas.map((name) => (22          <li23            key={name}24            ref={(node) => {25              itemsRef.current.set(name, node);26              return () => itemsRef.current.delete(name);27            }}28          >29            {name}30          </li>31        ))}32      </ul>33    </div>34  );35}

Line 6 makes one ref whose current is a new, empty Map. (React keeps the first one; the new Map() on later renders is thrown away, which costs next to nothing.) Lines 24 to 27 are the ref callback each <li> gets: line 25 stores the node under the tea's name, and line 26 returns a cleanup that deletes it. Line 9 finds a node by name, and line 10 scrolls the menu to it. The key on line 23 is the usual list key; it has nothing to do with the ref.

Returning a cleanup from a ref callback is new in React 19. Older code didn't return anything. Instead, React called the same function a second time with null when the node went away, so the callback had to check:

<li
  key={name}
  ref={(node) => {
    if (node) itemsRef.current.set(name, node);
    else itemsRef.current.delete(name);
  }}
>

That still works, and React still calls with null when your callback returns no cleanup. When it does return one, React calls the cleanup instead and skips the null call. The React 19 release post describes the change.

To watch React call ref callbacks, this list logs every call. Look at the console under the result first, then press Add chai, then Remove the first.

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(["Tea", "Cake"]);5 6  return (7    <div>8      <button onClick={() => setItems([...items, "Chai"])} disabled={items.includes("Chai")}>9        Add chai10      </button>11      <button onClick={() => setItems(items.slice(1))}>Remove the first</button>12      <ul>13        {items.map((name) => (14          <li15            key={name}16            ref={(node) => {17              console.log("attach", name, node.tagName);18              return () => console.log("cleanup", name);19            }}20          >21            {name}22          </li>23        ))}24      </ul>25    </div>26  );27}

Line 17 logs attach with the item's name and the node's tag, and line 18 returns a cleanup that logs cleanup. When the result first appears, the console shows six lines: attach Tea LI, attach Cake LI, cleanup Tea, cleanup Cake, then both attaches again. That's StrictMode at work: in development, React attaches each new ref, cleans it up, and attaches it again, once, to check that your cleanup really undoes what the callback did. A production build shows only the two attaches.

Now press Add chai. You might expect one line for Chai, but Tea and Cake log a cleanup and an attach too. The arrow function on lines 16 to 19 is a new function on every render, and when the ref changes to a different function, React cleans up with the old one and calls the new one. Then Chai gets its own attach, cleanup, attach, because it's new. Remove the first logs cleanups for all three, then attaches for the two that stay. For a ref callback that only sets and deletes in a Map, these extra calls are harmless, which is why the menu above is written this way.

Passing a ref to your own component

Put a ref on a built-in tag and you get its node. Put one on your own component, like <SearchBox>, and React has no node to give: a component is a function, not an element. In React 19, the ref simply arrives as a prop named ref, and the component decides which of its tags gets it. Click Find a tea, then open the SearchBox.jsx tab.

1import { useRef } from "react";2import SearchBox from "./SearchBox.jsx";3 4export default function App() {5  const searchRef = useRef(null);6 7  return (8    <div>9      <SearchBox label="Search teas" ref={searchRef} />10      <button onClick={() => searchRef.current.focus()}>Find a tea</button>11    </div>12  );13}

In App.jsx, line 5 makes the ref and line 9 passes it to SearchBox, like any prop. In SearchBox.jsx, line 1 takes ref out of the props next to label, and line 4 puts it on the <input>. So searchRef.current in App is the input's node, and line 10 can focus it. A component that never passes its ref on leaves the parent's ref at null: try removing ref={ref} from line 4 of SearchBox.jsx, and the click fails with Cannot read properties of null (reading 'focus') in the console.

This is a choice the component makes on purpose. A component's DOM nodes are private unless it hands them out, so you can change a component's insides without breaking the components that use it.

Code written before React 19 couldn't read ref as a prop: React kept it back, like key. Those components are wrapped in forwardRef, which hands the ref over as a second argument. You'll see it in many libraries and older apps, and it still works:

1import { useRef } from "react";2import SearchBox from "./SearchBox.jsx";3 4export default function App() {5  const searchRef = useRef(null);6 7  return (8    <div>9      <SearchBox label="Search teas" ref={searchRef} />10      <button onClick={() => searchRef.current.focus()}>Find a tea</button>11    </div>12  );13}

Open the SearchBox.jsx tab. Line 3 wraps the component in forwardRef, and the component gets ref as its second argument, after the props. Line 6 passes it on, as before, and App.jsx is unchanged. The React 19 release post says new function components no longer need forwardRef, and that React plans to deprecate it. Write new components with the ref prop.

How to read the table: each row is one way a component can take a ref, which React versions use it, and how the ref arrives.

Sharing only some methods with useImperativeHandle

Handing a parent the whole <input> lets it do anything to it: change its styles, remove it, set its text. Most of the time the parent only needs one or two things, like focusing it. useImperativeHandle lets your component give the parent its own small object, called a handle, instead of the node. Type something in the box, then click Clear the search.

1import { useRef } from "react";2import SearchBox from "./SearchBox.jsx";3 4export default function App() {5  const searchRef = useRef(null);6 7  function handleClear() {8    searchRef.current.clear();9    searchRef.current.focus();10    console.log("App can call:", Object.keys(searchRef.current));11  }12 13  return (14    <div>15      <SearchBox ref={searchRef} />16      <button onClick={handleClear}>Clear the search</button>17    </div>18  );19}

The box empties, the cursor goes into it, and the console prints App can call: followed by a list of two names, "focus" and "clear". In SearchBox.jsx, line 4 makes a ref of its own, and line 15 puts that one on the <input>. Lines 6 to 13 call useImperativeHandle with the ref prop and a function that returns the handle: an object with focus (line 7) and clear (line 10), each working on the private input. React puts that object in the parent's ref. So in App.jsx, lines 8 and 9 call the two methods, and line 10 lists everything the parent can reach: just those two.

clear on line 11 sets the input's value by hand. That's safe here because the input is uncontrolled: it has no value prop, so React never sets its text and nothing clashes.

Here are all four ways side by side. Pick a version of the code; the playground renders it with React, reads searchRef.current after the commit, and lets you call focus() on it.

export default function App() {
  const searchRef = useRef(null);
  return <input ref={searchRef} placeholder="Search teas" />;
}

A built-in <input> and a SearchBox that passes its ref on both give the node. A SearchBox that ignores its ref gives null, and calling focus() throws a TypeError. With useImperativeHandle, the ref holds an object with two functions, and focus() works because the handle has a method by that name.

When React fills in a ref

You met the two steps of every update in Render and commit: React calls your components to work out the new JSX (the render), then changes the page to match (the commit). Refs are filled in during the commit. This example reads its ref in two places on purpose, to show what each one sees. Look at the console, then click Add a cup.

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

Line 7 runs during every render. On the first one it logs Rendering: the ref holds null, with a small 2 beside it because StrictMode renders twice in development. The <p> on line 16 doesn't exist yet: it's made from the JSX this very render returns. Click Add a cup, and line 11 logs Clicked: the page still says Cups: 0. Line 10 asked for a new render, but it hasn't happened yet, so the page still shows the old number. Then the render logs Rendering: the ref holds Cups: 0: during the render, the page still has the old text too. Only after the commit does the <p> say Cups: 1.

So read refs in event handlers, which run long after the commit. Don't read or write them during render: the value is null or out of date there, and rendering must stay pure. In exact terms, React sets each changed ref to null just before it updates the DOM, and to the new node right after. If there's no event to read a ref in, you need an Effect, which the next lesson covers.

How to read the table: each row is a moment in a component's life, what a ref on its <p> holds then, and why.

The timing matters most when a handler changes state and then needs the new DOM straight away. A chat adds your message and should scroll to it. Pick a way to write the update, then press Send a message a few times.

1import { useRef, useState } from "react";2import { flushSync } from "react-dom";3 4export default function App() {5  const [messages, setMessages] = useState(["Message 1", "Message 2"]);6  const listRef = useRef(null);7 8  function handleSend() {9    const text = `Message ${messages.length + 1}`;10    setMessages([...messages, text]);11    const last = listRef.current.lastChild;12    last.scrollIntoView({ block: "nearest" });13    console.log("Scrolled to", last.textContent);14  }15 16  return (17    <div>18      <ul ref={listRef}>19        {messages.map((message) => (20          <li key={message}>{message}</li>21        ))}22      </ul>23      <button onClick={handleSend}>Send a message</button>24    </div>25  );26}

With just setMessages, the outline always lands one message behind. Setting state only queues a render, so line 11 reads lastChild from the old list. With flushSync, imported from react-dom on line 2, React renders and commits the update inside the call on lines 10 to 12, before it returns. The next line finds the new message. flushSync skips React's usual batching, so use it only when the next line needs the new DOM.

Leave the DOM React owns to React

Focusing, scrolling, and measuring don't change what React put on the page, so they never clash with it. Changing the nodes is different. React remembers what it rendered last time and changes the page by comparing against that memory, not against the page. Remove a node behind its back, and React's memory and the page disagree. Try it: click Toggle with state twice, then Remove with the DOM while the banner shows, then Toggle with state once more.

1import { useRef, useState } from "react";2 3export default function App() {4  const [showBanner, setShowBanner] = useState(true);5  const bannerRef = useRef(null);6 7  return (8    <div>9      <button onClick={() => setShowBanner(!showBanner)}>Toggle with state</button>10      <button onClick={() => bannerRef.current.remove()}>Remove with the DOM</button>11      {showBanner && <p ref={bannerRef}>Free delivery on orders over $20</p>}12    </div>13  );14}

The first two toggles hide and show the banner, the React way: line 9 flips showBanner, and line 11 renders the <p> only while it's true. Line 10 removes the <p> with the DOM's own remove(). The banner disappears, but React still thinks it's there. The last toggle asks React to remove it, React asks the browser to take it out of the <div>, and the browser throws: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. The whole result disappears and the error shows in its place. Press Run again to start over.

Changing a node's text or class by hand doesn't crash, but it doesn't last: the next time React updates that node, it puts its own value back. Render and commit shows that with a heading changed by hand.

You can still change the DOM yourself in parts React has no reason to touch. An element that React always renders empty is one: React never adds or removes its children, so your code can.

1import { useRef, useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(0);5  const notesRef = useRef(null);6 7  function handleAdd() {8    const note = document.createElement("li");9    note.textContent = `Note ${count + 1}, added by hand`;10    notesRef.current.append(note);11    setCount(count + 1);12  }13 14  return (15    <div>16      <button onClick={handleAdd}>Add a note</button>17      <p>Notes so far: {count}</p>18      <ul ref={notesRef} />19    </div>20  );21}

Click Add a note twice. Line 18 renders an empty <ul>, every time. Lines 8 to 10 create an <li> with plain DOM code and add it to that list. Line 11 changes state, so React renders again and updates the count on line 17, but the <ul> has no children in the JSX, so React leaves your notes alone. This is how non-React code, like a map or a chart library, lives inside a React app: React gives it an empty element and stays out.

A support chat that scrolls and focuses

Here is everything at work in one small support chat. Type a message and press Send (or Enter) a few times, until the list scrolls.

1import { useRef, useState } from "react";2import { flushSync } from "react-dom";3 4export default function App() {5  const [messages, setMessages] = useState(["Hi! How can we help?"]);6  const [text, setText] = useState("");7  const listRef = useRef(null);8  const inputRef = useRef(null);9 10  function handleSend(e) {11    e.preventDefault();12    if (text.trim() === "") return;13    flushSync(() => {14      setMessages([...messages, text]);15      setText("");16    });17    listRef.current.lastChild.scrollIntoView({ block: "nearest" });18    inputRef.current.focus();19  }20 21  return (22    <div>23      <ul ref={listRef} className="messages">24        {messages.map((message, index) => (25          <li key={index}>{message}</li>26        ))}27      </ul>28      <form onSubmit={handleSend}>29        <input ref={inputRef} value={text} onChange={(e) => setText(e.target.value)} placeholder="Type a message" />30        <button>Send</button>31      </form>32    </div>33  );34}

Lines 7 and 8 make two refs: one for the message list (line 23) and one for the input (line 29). handleSend stops the form from reloading the page (line 11) and ignores an empty message (line 12). Lines 13 to 16 add the message and empty the box inside flushSync, so when line 17 runs, the new <li> is already the list's last child, and it scrolls into view. Line 18 puts the cursor back in the box, so clicking Send doesn't leave the focus on the button. Everything React draws, the messages and the box's text, comes from state. The refs only scroll and focus.

Common mix-ups

• "ref.current holds the node as soon as I call useRef." No. It's null until React commits the element. Read it in event handlers, or in an Effect.
• "I need forwardRef to pass a ref to my component." Not in React 19. ref is an ordinary prop for function components. forwardRef is for older code.
• "A ref on my component gives the parent the component." No. It gives whatever the component attaches the ref to: a DOM node, the handle from useImperativeHandle, or nothing at all.
• "After setX(…), the DOM already shows the new value." No. React renders after your handler ends. Use flushSync only when the next line needs the new DOM.
• "Refs are a quicker way to change the page." No. Text or classes you change by hand get overwritten, and nodes you remove can crash React. Change state, and let React change the page.
• "Each list item needs its own useRef." No. Hooks can't go inside map(). Use one ref holding a Map, filled by ref callbacks.

Practice exercises

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

import { useRef } from "react";

export default function App() {
  const emailRef = useRef(null);
  console.log("emailRef.current is", emailRef.current);

  return <input ref={emailRef} type="email" placeholder="Your email" />;
}

1import { useRef } from "react";2 3export default function App() {4  const emailRef = useRef(null);5  console.log("emailRef.current is", emailRef.current);6 7  return <input ref={emailRef} type="email" placeholder="Your email" />;8}

1import { useRef } from "react";2 3export default function App() {4  const couponRef = useRef(null);5 6  function handleCopy() {7    // Select all the text in the coupon box here.8  }9 10  return (11    <div>12      <input defaultValue="TEA-FRIDAY-5" readOnly />13      <button onClick={handleCopy}>Select the code</button>14    </div>15  );16}

1import { useRef } from "react";2 3export default function App() {4  const couponRef = useRef(null);5 6  function handleCopy() {7    couponRef.current.select();8  }9 10  return (11    <div>12      <input ref={couponRef} defaultValue="TEA-FRIDAY-5" readOnly />13      <button onClick={handleCopy}>Select the code</button>14    </div>15  );16}

1import { useRef } from "react";2 3const cakes = [4  { id: 1, name: "Carrot cake" },5  { id: 2, name: "Lemon drizzle" },6  { id: 3, name: "Chocolate fudge" },7  { id: 4, name: "Banana bread" },8  { id: 5, name: "Red velvet" },9];10 11export default function App() {12  const cakesRef = useRef(new Map());13 14  function scrollToCake(id) {15    // Find the cake's <li> and scroll it into view.16  }17 18  return (19    <div>20      {cakes.map((cake) => (21        <button key={cake.id} onClick={() => scrollToCake(cake.id)}>{cake.name}</button>22      ))}23      <ul className="cakes">24        {cakes.map((cake) => (25          <li key={cake.id}>{cake.name}</li>26        ))}27      </ul>28    </div>29  );30}

1import { useRef } from "react";2 3const cakes = [4  { id: 1, name: "Carrot cake" },5  { id: 2, name: "Lemon drizzle" },6  { id: 3, name: "Chocolate fudge" },7  { id: 4, name: "Banana bread" },8  { id: 5, name: "Red velvet" },9];10 11export default function App() {12  const cakesRef = useRef(new Map());13 14  function scrollToCake(id) {15    cakesRef.current.get(id).scrollIntoView({ behavior: "smooth", block: "nearest" });16  }17 18  return (19    <div>20      {cakes.map((cake) => (21        <button key={cake.id} onClick={() => scrollToCake(cake.id)}>{cake.name}</button>22      ))}23      <ul className="cakes">24        {cakes.map((cake) => (25          <li26            key={cake.id}27            ref={(node) => {28              cakesRef.current.set(cake.id, node);29              return () => cakesRef.current.delete(cake.id);30            }}31          >32            {cake.name}33          </li>34        ))}35      </ul>36    </div>37  );38}

1import { useRef, useState } from "react";2 3export default function App() {4  const [orders, setOrders] = useState(["Order 1", "Order 2", "Order 3"]);5  const listRef = useRef(null);6 7  function handleAdd() {8    setOrders([...orders, `Order ${orders.length + 1}`]);9    const last = listRef.current.lastChild;10    console.log("Scrolled to", last.textContent);11    last.scrollIntoView({ block: "nearest" });12  }13 14  return (15    <div>16      <button onClick={handleAdd}>Add an order</button>17      <ul ref={listRef}>18        {orders.map((order) => (19          <li key={order}>{order}</li>20        ))}21      </ul>22    </div>23  );24}

1import { useRef, useState } from "react";2import { flushSync } from "react-dom";3 4export default function App() {5  const [orders, setOrders] = useState(["Order 1", "Order 2", "Order 3"]);6  const listRef = useRef(null);7 8  function handleAdd() {9    flushSync(() => {10      setOrders([...orders, `Order ${orders.length + 1}`]);11    });12    const last = listRef.current.lastChild;13    console.log("Scrolled to", last.textContent);14    last.scrollIntoView({ block: "nearest" });15  }16 17  return (18    <div>19      <button onClick={handleAdd}>Add an order</button>20      <ul ref={listRef}>21        {orders.map((order) => (22          <li key={order}>{order}</li>23        ))}24      </ul>25    </div>26  );27}

1import { useRef } from "react";2import QuantityInput from "./QuantityInput.jsx";3 4export default function App() {5  const quantityRef = useRef(null);6 7  function handleEdit() {8    quantityRef.current.focus();9    quantityRef.current.select();10  }11 12  return (13    <div>14      <QuantityInput label="Cups of chai" ref={quantityRef} />15      <button onClick={handleEdit}>Change the amount</button>16    </div>17  );18}

1export default function QuantityInput({ label, ref }) {2  return (3    <label>4      {label} <input ref={ref} type="number" defaultValue={1} min={1} />5    </label>6  );7}

1import { useRef } from "react";2import MessageList from "./MessageList.jsx";3 4const messages = ["Hi!", "Is the chai sweet?", "A little.", "Great, one please.", "Coming up.", "Thanks!"];5 6export default function App() {7  const listRef = useRef(null);8 9  function handleJump() {10    listRef.current.scrollToBottom();11    console.log("The handle has:", Object.keys(listRef.current));12  }13 14  return (15    <div>16      <button onClick={handleJump}>Jump to the newest</button>17      <MessageList messages={messages} ref={listRef} />18    </div>19  );20}

1import { useImperativeHandle, useRef } from "react";2 3export default function MessageList({ messages, ref }) {4  const listRef = useRef(null);5 6  useImperativeHandle(ref, () => ({7    scrollToBottom() {8      listRef.current.lastChild.scrollIntoView({ block: "nearest" });9    },10  }));11 12  return (13    <ul ref={listRef} className="messages">14      {messages.map((message) => (15        <li key={message}>{message}</li>16      ))}17    </ul>18  );19}

Check your understanding

Key takeaways

• ref={myRef} on a built-in tag makes React put the DOM node in myRef.current.
• Use refs for jobs JSX has no prop for: focus, scrolling, measuring, selecting text, playing media.
• For a list, pass a ref callback. It gets the node, and the cleanup it returns runs when the node goes (React 19).
• In React 19, ref is a prop for function components. Pass it on to a tag, or share a smaller handle with useImperativeHandle. forwardRef is for older code.
• React fills in refs during the commit. Read them in event handlers, not during render. flushSync commits an update at once when the next line needs it.
• Never add, remove, or change the nodes React manages. Change state, or work inside an element React leaves empty.

Coming next: Synchronizing with effects.