Command Palette

Search for a command to run...

Hectal
Phase 8Intermediate9 of 28 in React

Refs and the DOM

useRef for values that shouldn't re-render, reaching real DOM nodes, ref as a prop, useImperativeHandle, portals and wrapping non-React widgets.

Most of the time React owns the page: you describe the screen and React changes the DOM. But sometimes you need to step outside that model. You need to remember a timer id without redrawing anything, put the cursor in a text box, scroll a list to the newest message, measure how wide a box is, or hand a real DOM element to a chart library that knows nothing about React. Refs are React's escape hatch for exactly these jobs.

In this phase you'll learn useRef and how a ref differs from state, how to attach refs to DOM elements (one element, or a whole list of them with callback refs and a Map), how React 19 lets you pass ref to your own components as a normal prop (and how older code did it with forwardRef), how useImperativeHandle exposes a small, safe API instead of a whole DOM node, how portals render a modal or tooltip somewhere else in the DOM while staying in your React tree, and how to wrap non-React code with a ref and an effect, using flushSync when the DOM must update right now.

Refs are powerful because React doesn't watch them. That is also why they are easy to misuse. Every topic shows the rule for when a ref is the right tool, and the bug you get when it isn't.

0/6 · 0%
6 topics ~2 h 21 code blocks & diagrams
Start with the first topic
1
8.1

Refs: Remembering Without Re-rendering

useRef gives a component a box, { current: value }, that keeps its value between renders but doesn't cause a re-render when you change it; use it for values the screen doesn't show, such as timer ids and previous values.

24 min 1 diagram 3 code practice

2
8.2

Reaching the DOM with Refs

Put a ref on a JSX element with the ref attribute and React stores the real DOM node in ref.current after the commit, so you can focus it, scroll it into view or measure it; for a whole list of elements, use a callback ref that fills a Map.

26 min 4 code practice

3
8.3

Passing Refs to Your Components

Since React 19 a function component receives ref as an ordinary prop and can pass it on to a DOM element; older code wraps the component in forwardRef instead, and ref callbacks can now return a cleanup function.

24 min 3 code practice

4
8.4

useImperativeHandle: Exposing a Small API

useImperativeHandle(ref, () => ({ ...methods }), deps) makes a parent's ref point at an object you choose instead of a DOM node, so you expose a few safe methods such as focus, scrollToBottom or reset and keep the rest of your component private.

22 min 3 code practice

5
8.5

Portals

createPortal(children, domNode) renders part of your component's output into a different DOM element, such as document.body, while it stays in the same place in the React tree: props, context and even events still flow as if it were rendered in place.

25 min 3 code practice

6
8.6

Working with Non-React Code

To use a widget that wasn't built for React (a chart, a map, an editor), give it a DOM node through a ref, create it in an effect, keep it in sync with props in another effect and destroy it in the cleanup; use flushSync only when you must read the updated DOM right after a state change.

28 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Focus the field from a button

Clicking the Edit name button (id="edit") must put the cursor in the name input (id="name").

Beginner
2

Fix the stopwatch that won't stop

This stopwatch keeps its interval id in a normal variable, so Stop doesn't work. Fix it with a ref.

Intermediate
3

Let the form reach the input inside your component

The TextField component renders a label and an <input>. The form passes it a ref so Fix the email (id="fix") can focus the email input (id="email"), but TextField ignores the ref, so clicking crashes.

Intermediate
4

Expose only focus and clear

SearchBox forwards its ref to the <input>, so the parent gets the whole DOM node. Change it so the parent's ref gets only an object with two methods: focus() and clear().

Intermediate
5

An accessible modal in a portal

The Delete button (id="open") should open a confirmation dialog. Build the ConfirmDialog component so that:

Intermediate
6

A chat that scrolls to the newest message

Build the send behaviour of this chat. When the form is submitted with text in the input (id="msg"):

Advanced