React 19 Hooks Guide: Examples for Every Built-in Hook

React 19 keeps every hook from React 18 and adds six more, so you now have 17 built-in hooks at your fingertips.
Below, each hook is grouped by job, explained in one sentence, and paired with a tiny, real-world TypeScript snippet that runs in any Vite, CRA, or Next.js starter.

🧩 1. State Hooks

// useActionState – contact form with loading & success
import { useActionState } from 'react';

async function send(prev: any, fd: FormData) {
  await fetch('/api/contact', { method:'POST', body: fd });
  return { ok: true };
}

export default function Contact() {
  const [msg, submit] = useActionState(send, {});
  return (
    <form action={submit}>
      <input name="email" required />
      <button disabled={msg.ok}>{msg.ok ? 'Sent ✔' : 'Send'}</button>
    </form>
  );
}

📦 2. Ref Hooks

// useImperativeHandle – parent can call .focus()
import { forwardRef, useRef, useImperativeHandle } from 'react';

const FancyInput = forwardRef<HTMLInputElement>((_, ref) => {
  const inner = useRef<HTMLInputElement>(null);
  useImperativeHandle(ref, () => ({ focus: () => inner.current?.focus() }));
  return <input ref={inner} placeholder="Focus me from parent" />;
});

export default function Parent() {
  const ref = useRef<{ focus(): void }>(null);
  return (
    <>
      <FancyInput ref={ref} />
      <button onClick={() => ref.current?.focus()}>Focus</button>
    </>
  );
}

⚡ Effect & Lifecycle Hooks

// useInsertionEffect – add CSS-in-JS without FOUC
import { useInsertionEffect } from 'react';

export default function Button({ color }: { color: string }) {
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.innerHTML = `.btn-${color}{background:${color};}`;
    document.head.append(style);
    return () => style.remove();
  }, [color]);
  return <button className={`btn-${color}`}>Click</button>;
}

🧪 Transition & Defer Hooks

// useTransition – switch tab without freezing UI
import { useState, useTransition } from 'react';

export default function Tabs() {
  const [tab, setTab] = useState('home');
  const [pending, start] = useTransition();
  return (
    <>
      <button onClick={() => start(() => setTab('settings'))}>
        Settings
      </button>
      {pending && <span>Loading…</span>}
      {tab === 'settings' && <h2>Settings ⚙️</h2>}
    </>
  );
}

// useDeferredValue – search stays fast while 10 k rows render
import { useState, useDeferredValue, memo } from 'react';

export default function App() {
  const [text, setText] = useState('');
  const deferred = useDeferredValue(text);
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <BigList filter={deferred} />
    </>
  );
}

const BigList = memo(({ filter }: { filter: string }) => (
  <ul>
    {Array.from({ length: 10000 }, (_, i) => `Item ${i}`)
      .filter(it => it.includes(filter))
      .map(it => <li key={it}>{it}</li>)}
  </ul>
));

📝 Form Hooks (NEW)

// useFormStatus – reusable SubmitButton
import { useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? 'Saving…' : 'Save'}</button>;
}

🎭 Optimistic UI Hook (NEW)

// useOptimistic – like counter with instant +1, rollback on fail
import { useOptimistic, useState } from 'react';

export default function Like({ id, initial }: { id: string; initial: number }) {
  const [likes, setLikes] = useState(initial);
  const [opt, add] = useOptimistic(likes, l => l + 1);

  async function like() {
    add();
    try {
      await fetch(`/api/like/${id}`, { method:'POST' });
      setLikes(l => l + 1);
    } catch { /* auto-rollback */ }
  }

  return <button onClick={like}>{opt} ❤️</button>;
}

🌐 Promise Hook (NEW)

// use() – fetch without useEffect
import { use } from 'react';

async function getUser(id: string) {
  const res = await fetch(`/api/user/${id}`);
  return res.json();
}

export default function Profile({ id }: { id: string }) {
  const user = use(getUser(id));
  return <h1>Hi {user.name}</h1>;
}

🔄 Memoization Hooks

🧩 Context Hook

🪝 Debug Hook

✅ TL;DR