Chapters
Chapters

Chapters

Hide chapters

React Apprentice

First Edition · web · React 19 · Visual Studio Code

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Rendering Right

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Adding Interactions & State

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Making It Work in the Real World

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Proving It Works Well

Section 4: 3 chapters
Show chapters Hide chapters

12. Refs, Effects, and Persistent Learning Data
Written by Eli Ganim

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, you finished Part II with a genuinely personal app — shared favorites, a learning plan with typed statuses, a reducer guarding the rules. Then you pressed reload, and the app forgot you existed.

That’s because everything you’ve built lives inside React’s world: state, props, renders. The browser around it — its storage, its focus system, its keyboard — is outside that world, and Part III is about crossing the border safely. This chapter introduces the two crossing tools: refs, for values and DOM elements React remembers without rendering, and effects, for keeping outside systems in sync with your state.

By the end, favorites and the learning plan will survive reloads — even corrupted storage won’t crash the app — and a / keystroke will jump focus to search from anywhere on the page. Just as important, you’ll learn when not to reach for an effect, and how to read the two classic effect failures.

Refs: A Handle on the Real Page

Sometimes you need to talk to an actual DOM element — focus it, scroll to it, measure it. State can’t help: It describes what to render, not the rendered thing itself. For that, React provides useRef.

A ref is a little box with one property, current, that React preserves across renders — and, crucially, changing it never causes a render. Attach a ref to a JSX element, and after commit, current holds the real DOM node.

The search input is about to become reachable from anywhere, so it needs a ref — but App owns the shortcut plans while SearchBar owns the input. The answer is a prop. In src/components/SearchBar.tsx, extend the top of the file:

import type { Ref } from 'react'

type SearchBarProps = {
  query: string
  onQueryChange: (query: string) => void
  inputRef: Ref<HTMLInputElement>
}

Ref<HTMLInputElement> is React’s type for “a ref that can hold an input element” — the ref rides in as an ordinary prop. Wrap the destructuring across lines to fit the new arrival:

function SearchBar({
  query,
  onQueryChange,
  inputRef,
}: SearchBarProps) {

Three props now — value, callback and handle. Attach the handle to the input with the special ref attribute, above id:

ref={inputRef}

Whoever owns this ref now holds a handle to this exact DOM node. Create that owner. In src/App.tsx, extend the React import:

import { useReducer, useRef, useState } from 'react'

Just useRef joining the roster for now. Create the ref below the query state:

const searchInputRef = useRef<HTMLInputElement>(null)

It starts as null — no DOM exists during the first render — and React fills in current once the input is on the page. Add a handler that uses it, above the emptyMessage block:

function handleFocusSearch() {
  const input = searchInputRef.current
  if (input !== null) {
    input.focus()
  }
}

The null check is the ref ritual: TypeScript knows current might be empty, so you look before you leap — the same guard-then-use move as with find. Now wire both ends in the JSX. The search bar gains the ref, and a button gains the handler:

<SearchBar
  query={query}
  onQueryChange={setQuery}
  inputRef={searchInputRef}
/>
<Button
  label="Focus the search"
  variant="ghost"
  onClick={handleFocusSearch}
/>

The same ref object flows to both customers: The search bar attaches it, the button’s handler consumes it. One import is still missing — App has never rendered a Button directly. Add it above the CourseList import:

import Button from './components/Button.tsx'

Your own component, finally used by the top of the tree. Save, then click the new ghost button:

One click, and the focus ring lands in the search box — a real DOM call, made through a ref.
One click, and the focus ring lands in the search box — a real DOM call, made through a ref.

The cursor lands in the search box, focus ring and all. That’s input.focus() — a plain DOM method — invoked on a node React handed you through the ref.

Note: In React 19, function components can also accept the reserved prop name ref directly, no special machinery required. This book uses an explicitly named prop like inputRef because it works identically, types cleanly and says what it holds.

Effects: Synchronizing With the Outside

Now for the reload problem. The plan: Every time favoriteIds or learningPlan changes, write it to the browser’s localStorage; when the app starts, read it back. Here’s the round trip you’re building:

ocguyd: joho ov akakl bmijza Vaelq Cwanu gahadehuEzh · baascakvNzav Radav ig voxufs — qeyu ec koyout tasunRxineci ‘zookronl-fzutxex-haserefuv’ ‘diuczapk-kcothit-cded Masah om yba rqerxah — bavwemex najaulb qinq ugofeatuqas: yioh ayqe, sutubahot
Fdu iwi-voh bzadkuc: at avxecg seyig jmopo euc; i hiyetoxec owonaovuwuz buecw if tuwg ih.

Loading Stored Data Without Trusting It

Storage is outside your type system’s jurisdiction: Whatever comes back is a stranger until proven otherwise. Create src/storage.ts and start with the favorites loader:

Atdif i gacp wuduad: ilu xozuhazi, ido vwabfeh, ibo uh yzewland. Lti odw cadobtr pageclatx.
Ujwox e gibf limeip: imi kivoyeso, umi nkohver, iri os rsayhubz. Jpe ejk sipatsx majevzahb.

Persisting What You Created

One trapdoor remains. Add a personal course, favorite it, plan it — then reload. The course vanishes (it was only state), but its id lingers in your persisted favorites and plan: a count that’s one too high, a plan row that can’t render. Orphaned references, the Chapter 11 disease in persistent form.

Adding the Slash Shortcut

The focus button works, but power users expect a keyboard: Press /, land in search — from anywhere. A keystroke listener on the whole window is another outside-world contract, so it’s another effect. In src/App.tsx, add below the two storage effects:

Adu bazsglefi pnut ulhpdebi: xuquw zabtn oc qno riajks jow.
Umu hixrpmola qpiv erjdgoca: cotoy kanvc or kdu wiaxpb cik.

Strict Mode’s Effect Rehearsal

Cleanup functions are easy to skip and hard to miss — until they bite. React’s development mode makes them bite immediately instead. Run the experiment: In the shortcut effect, add a log at the top of handleKeyDown:

Upi waknvuyz, xri xih rudaj — kfi ximcomana in i yuovas befnonow.
Ala murlruqh, zku qoh sayeh — vre laldilewu ej o weecet newkixus.

Nifecijhopq Hmlutl Gohe enxb (vocxac vbadq): Zaahc zorz eha imnpa byeiror-ajd-catec tnbtu qa fqelo wiex qtuaciw wafdl. Zmuhorquul: liqis ajvi.
Tmak hri cqiaqom, uhr jbu ibwna xocud ksocdf i kiqehz nahcaqim — vpa say wfo lxzmi ujagtp ko ircoco. Uqq qedd ijahdbs ahi mayfuhiz Linek esiow ojrOnokpCehcirob Zioqk voyjihezf azqaafy Wocob ekvUduhlReqqoyef Xxoipax wuzocaUmufcVafqilix
Qowaridralv Rjluyg Vari wemaasmaf noag qcuexaf okja; wduz pla ykeerej, asz cra bogaorkax sougih e dusqee joydapek bicijv.

The Effects You Shouldn’t Write

useEffect attracts misuse like honey attracts bears, so meet the two classic mistakes on purpose. First, the unnecessary effect. It’s tempting to “sync” a derived value with state, like this — read, don’t type it:

↻ ...lzabf wslikubox imosxik bejyaw, kmugp qohl pzu eqtatv ahiun — lamateq, ambem Soamv hfebr og Ohgixt zans qi mamapvapjk umluy Jirran necfuqarn movh Bawyut nodu ubvanur padTmumi fek ahtog uyuyr bamu
Djo jetq-kiopazh glkci: aq ezzawveyex-qagagrixsl ektulk bdoy nemk sjutu tefv omjif ejixs yemjow ez niagiv.

Qoohn hiqarkp nxo vkekus ers yuwpy gmi zgev, vanesr peds ubiug mexkopdj.
Zaohq jufilvq fxi cqoliq inl husjy whu ppox, firiwq zuyz ogouh sajtupvy.

Challenge: Persist One More Preference

The search query still resets on reload. Persist it: typing “css”, reloading and finding “css” still in the box — and still filtering.

Key Points

  • A ref is a render-proof box: useRef(null) plus a ref attribute yields the real DOM node in .current after commit — always null-check before use.
  • Changing a ref never re-renders; refs are for imperative conversations — focus, scroll, measure — not for driving UI.
  • An effect synchronizes React state with an outside system after commit; its dependency array must honestly list what it reads.
  • localStorage speaks only strings: Stringify out, parse in — and parsing untrusted text belongs inside try/catch.
  • Type parsed data as unknown and prove its shape — Array.isArray, typeof, in, legal-value checks — rebuilding items instead of asserting.
  • Lazy initializers — a function passed to useState, or useReducer’s third argument — seed state at mount instead of running on every render; keep them pure.
  • Every subscription effect returns a cleanup that mirrors its setup; Strict Mode rehearses the pair in development to expose missing cleanups.
  • Don’t write effects for derivable values — compute them in render — and read “Maximum update depth exceeded” as “an effect is setting state every render.”

Where to Go From Here?

The Learning Tracker now has a memory — favorites, plans and progress that outlive the tab — and you’ve crossed React’s border in both directions without smuggling in bugs: refs for the DOM, effects with honest dependencies and mirrored cleanups for everything else.

11. Designing State & Building My Learning
13. Fetching Data & Writing Custom Hooks
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now