Lekce 4 · Hooky do hloubky

Refy (useRef)

Přístup k DOM, hodnoty bez překreslení, ref jako prop a useImperativeHandle.

Než začneme: tabule a šuplík

V lekci o stavu jsme si řekli, že stav je sešit, který kuchaři drží React. Každý zápis do sešitu znamená nové vaření – nový render. To je přesně to, co chceme pro věci, které vidí hosté: počet v košíku, text v poli, otevřené menu.

Představ si to jako tabuli s denním menu na stěně restaurace. Když se něco změní, tabule se musí přepsat, aby ji hosté viděli aktuální. Přepisování ale stojí práci.

Kuchař si ale potřebuje pamatovat i věci, které hosté nikdy neuvidí: „minutka na troubě má číslo 3“, „poslední objednávka přišla v 18:42“. Kvůli tomu přece nebude přepisovat tabuli. Napíše si to na papírek a hodí do šuplíku pod linkou. Do šuplíku může sáhnout kdykoli, nikdo si toho nevšimne a nic se nepřepisuje.

Ten šuplík je v Reactu ref. Pamatuje si hodnotu mezi rendery (jako stav), ale jeho změna nespustí render.

Klíč od konkrétních dveří

Ref má ještě druhé použití. Normálně React stránku skládá za tebe a k jednotlivým HTML prvkům se nedostaneš – a většinou to ani nepotřebuješ. Jsou ale věci, které popisem („jak má stránka vypadat“) udělat nejdou: „dej kurzor do tohohle pole“, „odscrolluj sem“, „změř, jak je tenhle box velký“. Na to potřebuješ klíč od konkrétních dveří – odkaz na skutečný prvek stránky. I ten ti React předá v refu.

1. Ref jako paměť bez renderu

Typický případ pro šuplík: stopky s tlačítky Start a Stop. Interval spustíš v jednom handleru a zastavit ho musíš v jiném. K zastavení potřebuješ jeho ID, které vrátí setInterval. Kam ho uložit?

function Stopwatch() {
  const [seconds, setSeconds] = useState(0)          // tabule – vidí ho uživatel
  const intervalRef = useRef<number | null>(null)    // šuplík – technický údaj

  function start() {
    intervalRef.current = window.setInterval(() => {
      setSeconds((s) => s + 1)
    }, 1000)
  }

  function stop() {
    if (intervalRef.current !== null) {
      clearInterval(intervalRef.current)
      intervalRef.current = null
    }
  }

  return (
    <>
      <p>{seconds} s</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </>
  )
}

Co tu dělá ref:

useRef(null) vytvoří objekt { current: null }. React ti při každém renderu vrátí ten samý objekt – je to pořád ten samý šuplík.
Do intervalRef.current můžeš kdykoli zapsat. React se o tom nedozví a nic nepřekreslí.
Když pak klikneš na Stop, handler sáhne do šuplíku a najde tam ID z kliknutí na Start – i když mezi tím proběhlo několik renderů.

Proč ne jinak?

Kam uložit ID	Co se stane
`let id`	Proměnná se při každém renderu vytvoří znovu (kuchař bez paměti). Po prvním tiknutí je ID ztracené a Stop nic nezastaví.
`useState`	Funguje, ale uložení ID zbytečně spustí render – uživatel ID nikdy neuvidí. Tabuli přepisuješ kvůli papírku do šuplíku.
`useRef`	Pamatuje si a nepřekresluje. Správně.

	useState (tabule)	useRef (šuplík)
Změna způsobí render	Ano	Ne
Hodnota v handleru	Snímek z renderu	Vždy aktuální (.current)
Jak se mění	Jen přes setter	Přímým zápisem do .current
Použij pro	Data zobrazená v UI	ID časovačů, prvky stránky, instance knihoven, předchozí hodnoty

Ukázka

Ref vs. stav

Co vidíš: Dvě počítadla. Horní je ve stavu (tabule), dolní v refu (šuplík). Text u refu ukazuje hodnotu, jakou měl ref při posledním renderu. Dole je počet renderů komponenty.

Vyzkoušej:

Klikni pětkrát na ref + 1. Na obrazovce se nic nezmění, ani počet renderů. Hodnota se přitom opravdu zvyšuje – když otevřeš konzoli prohlížeče (F12), uvidíš ji tam.
Klikni jednou na state + 1. Komponenta se překreslí a najednou ukáže i ref = 5. Ref si celou dobu pamatoval, jen o tom nikomu neřekl.
Všimni si počtu renderů: po kliknutí na state + 1 vyskočí o 2. Ve vývojovém režimu React render schválně volá dvakrát, aby odhalil nečisté komponenty – proto se do refu během renderu zapisovat nemá (tady to děláme jen pro ukázku).

Co z toho plyne: Ref si hodnotu pamatuje stejně jako stav, ale jeho změna nic nepřekreslí. Na obrazovku se dostane jen náhodou, když render vyvolá něco jiného.

Načítám interaktivní část…

2. Ref na prvek stránky

Druhé použití: klíč od konkrétních dveří. Typický příklad – vyhledávací pole s tlačítkem „Hledat“, které po kliknutí vrátí kurzor do pole, aby uživatel mohl hned psát dál.

function Search() {
  const inputRef = useRef<HTMLInputElement>(null)

  function handleSearch() {
    // …spusť hledání…
    inputRef.current?.focus()       // vrať kurzor do pole
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleSearch}>Hledat</button>
    </>
  )
}

Kdy se do refu dostane prvek stránky:

Render: React zavolá Search(). V tu chvíli prvek <input> ještě neexistuje, inputRef.current je null.
Zápis do stránky: React vytvoří skutečný <input> a uvidí u něj ref={inputRef}. Vloží prvek do inputRef.current.
Kliknutí: handler sáhne do refu a najde tam hotový prvek. Zavolá jeho metodu focus() – přesně tu, kterou má každý <input> v prohlížeči.
Odstranění: když input ze stránky zmizí, React do refu vrátí null.

Proto má ref otazník: inputRef.current?.focus(). V handleru a v efektu je prvek k dispozici, během renderu ne.

Ukázka

Focus, měření a scroll

Co vidíš: Tři typické úkoly, které popisem udělat nejdou: dát kurzor do pole, změřit velikost prvku a odscrollovat k položce seznamu. Každý používá ref na jiný prvek.

Vyzkoušej:

Napiš do pole pár slov, klikni mimo něj a pak na Focus. Kurzor se vrátí do pole. Tlačítko Označit text v něm označí celý text.
Zvětši box „Zvětši mě za roh“ tažením za pravý dolní roh a klikni na Změřit. Ref dal přístup k prvku, ze kterého se přečetla jeho skutečná velikost.
Klikni na → Tom a pak na → Mourek. Seznam koček odscrolluje k dané položce.

Co z toho plyne: Ref je klíč k prvku stránky. Používáš ho pro akce, které nejsou „jak má stránka vypadat“, ale „udělej teď tohle s tímhle prvkem“.

Načítám interaktivní část…

3. Ref na vlastní komponentu

Když chceš dát kurzor do pole, které je schované uvnitř tvé vlastní komponenty (<FancyInput />), potřebuješ, aby ti ta komponenta ref „podala dál“. V Reactu 19 je to jednoduché: ref je obyčejný prop.

// React 19: ref přijde jako prop a pošleš ho dál na <input>
function MyInput({ ref, ...props }: { ref?: Ref<HTMLInputElement> } & ComponentProps<'input'>) {
  return <input ref={ref} {...props} />
}

// Použití – jako by to byl obyčejný <input>
const inputRef = useRef<HTMLInputElement>(null)
<MyInput ref={inputRef} />

// Starší zápis (React 18 a dřív) – v cizím kódu ho ještě potkáš
const MyInput = forwardRef<HTMLInputElement, Props>((props, ref) => <input ref={ref} {...props} />)

Dálkový ovladač místo šroubováku

Když rodiči podáš celý <input>, může s ním dělat cokoli: měnit styly, mazat obsah, přidávat posluchače. Je to jako dát někomu televizi se šroubovákem. Často je lepší dát mu jen dálkový ovladač s pár tlačítky. K tomu slouží useImperativeHandle:

interface FancyInputHandle {
  focus: () => void
  shake: () => void
}

function FancyInput({ ref }: { ref?: Ref<FancyInputHandle> }) {
  const inputRef = useRef<HTMLInputElement>(null)   // vlastní, soukromý ref

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current?.focus(),
    shake: () => { /* krátká animace zatřesení */ },
  }))

  return <input ref={inputRef} />
}

// Rodič vidí jen dvě tlačítka ovladače:
const emailRef = useRef<FancyInputHandle>(null)
emailRef.current?.shake()

Komponenta má vlastní ref na <input> a nikomu ho nedá.
useImperativeHandle řekne: „do refu, který mi poslal rodič, nedávej prvek stránky, ale tenhle objekt“.
Rodič tak může zavolat jen focus() a shake(). Vnitřek komponenty můžeš kdykoli předělat a rodič si ničeho nevšimne.

Ukázka

Omezené API přes useImperativeHandle

Co vidíš: Komponenta FancyInput z příkladu výše. Rodič má dvě tlačítka, která volají metody z jejího „ovladače“.

Vyzkoušej:

Klikni na focus(). Kurzor skočí do pole – rodič zavolal metodu, kterou komponenta sama nabídla.
Klikni na shake(). Pole se zatřese a krátce zčervená. To je typická akce bez trvalého stavu – nedá se dobře vyjádřit propsem.
Otevři kód a najdi useImperativeHandle. Všimni si, že rodič nikdy nedostane samotný <input>.

Co z toho plyne: Komponenta rozhoduje, co dovolí rodiči ovládat. Malé, jasné API je bezpečnější než podat celý prvek.

Načítám interaktivní část…

Ověř si to

Kvíz Kam uložit ID z setInterval, které potřebuješ v handleru „Stop“?

Do useStateDo useRefDo obyčejné proměnné v těle komponentyDo window

Kvíz Proč je inputRef.current během prvního renderu null?

Protože je bug v ReactuProtože prvek stránky ještě neexistuje – React ho vytvoří až po renderuProtože ref funguje jen v class komponentáchProtože chybí forwardRef

Kvíz Komponenta ukazuje počet kliknutí na tlačítko. Kam ho uložit?

Do useRef, je to rychlejšíDo useStateJe to jedno

Rozcvička

Výzva

Zaměř pole

Rozcvička

Spoj ref s inputem a po kliknutí na tlačítko do něj přesuň kurzor.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Zaměř pole

Ref je vytvořený, ale zatím s ničím nespojený.

1. Připoj ref k inputu: <input ref={inputRef} … />
2. Tlačítko ať při kliknutí zavolá inputRef.current?.focus()

🧩 Odkud se berou věci, které tu nejsou definované

CSS třídy jako row, stack, card, list, btn, input nebo muted jsou hotové styly kurzu v src/styles.css (row = prvky vedle sebe, stack = pod sebou, card = rámeček, muted = šedý text).

Načítám interaktivní část…

Mám hotovo

Výzvy

Chat procvičí kapitoly 1 a 2: ref na prvek stránky (scroll, focus) a ref jako paměť bez renderu. Odpočet kapitolu 3 – navrhneš vlastní dálkový ovladač.

Výzva

Chat se scrollem a focusem

Střední Bonusová výzva

Kombinace refu na prvek stránky, refu jako paměti bez renderu a efektu, který synchronizuje scroll.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Výzva

Odpočet ovládaný přes ref

Těžká Bonusová výzva

Navrhni komponentu s ovladačem o třech tlačítkách (start, pauza, reset) – přesně tak fungují přehrávače videa v UI knihovnách.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Shrnutí

Stav je tabule, ref je šuplík. Oba si pamatují mezi rendery, ale jen změna stavu překreslí.
Ref použij pro věci, které uživatel nevidí: ID časovačů, předchozí hodnoty, instance knihoven.
Ref na prvek stránky pro focus, měření, scroll a knihovny mimo React. Prvek v něm je až po renderu.
ref.current nečti ani nepiš během renderu – jen v handlerech a efektech.
React 19: ref je obyčejný prop; forwardRef už nepotřebuješ.
useImperativeHandle dá rodiči dálkový ovladač místo celého prvku – jen pro akce, které nejdou vyjádřit propsem.

Načítám lekci…

💬 Našel jsi chybu, něco ti není jasné, nebo máš nápad? Napiš mi.