React 19 完全ガイド【2026年最新】｜React Compiler 1.0・Actions・useActionState・useFormStatus・useOptimistic・use()・ref as prop・Server Components・19.2 Activity まで実践パターンで解説

function ProductList({ products, onSelect }: Props) {
  const expensive = products.map((p) => transform(p));         // 毎回再計算
  const handleClick = (id: string) => onSelect(id);            // 毎回新しい関数
  return (
    <ul>
      {expensive.map((p) => (
        <Item key={p.id} data={p} onClick={handleClick} />
      ))}
    </ul>
  );
}

import { useMemo, useCallback, memo } from "react";

const ProductList = ({ products, onSelect }: Props) => {
  const expensive   = useMemo(() => products.map(transform), [products]);
  const handleClick = useCallback((id: string) => onSelect(id), [onSelect]);

  return (
    <ul>
      {expensive.map((p) => (
        <Item key={p.id} data={p} onClick={handleClick} />
      ))}
    </ul>
  );
};

const Item = memo(function Item({ data, onClick }: ItemProps) { ... });

npm install --save-dev babel-plugin-react-compiler eslint-plugin-react-compiler
npm install react@latest react-dom@latest

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [["babel-plugin-react-compiler", { target: "19" }]],
      },
    }),
  ],
});

{
  "plugins": ["react-compiler"],
  "rules": {
    "react-compiler/react-compiler": "error"
  }
}

function UpdateNameForm() {
  const [name, setName]       = useState("");
  const [error, setError]     = useState<string | null>(null);
  const [isPending, setBusy]  = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true); setError(null);
    try {
      await updateName(name);
      setName("");          // フォームリセット手動
    } catch (err) {
      setError(String(err));
    } finally {
      setBusy(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button disabled={isPending}>更新</button>
      {error && <p>{error}</p>}
    </form>
  );
}

import { useActionState } from "react";

async function updateAction(_prev: string | null, formData: FormData) {
  const name = formData.get("name") as string;
  try {
    await updateName(name);
    return null;                              // 成功
  } catch (e) {
    return String(e);                         // エラーを state に反映
  }
}

export function UpdateNameForm() {
  const [error, submitAction, isPending] = useActionState(updateAction, null);

  return (
    <form action={submitAction}>
      <input name="name" required />
      <button disabled={isPending}>更新</button>
      {error && <p>{error}</p>}
    </form>
  );
}

"use client";
import { useFormStatus } from "react-dom";

export function SubmitButton({ children }: { children: React.ReactNode }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "送信中..." : children}
    </button>
  );
}

// 使う側は isPending を渡さなくていい
// <form action={submitAction}>
//   <input name="name" />
//   <SubmitButton>更新</SubmitButton>
// </form>

"use client";
import { useOptimistic } from "react";

type Props = { postId: string; initialLikes: number };

export function LikeButton({ postId, initialLikes }: Props) {
  const [optimisticLikes, addOptimistic] = useOptimistic(
    initialLikes,
    (state: number, increment: number) => state + increment
  );

  async function likeAction() {
    addOptimistic(1);                         // UI 即時更新
    await fetch(`/api/like/${postId}`, { method: "POST" });
    // 失敗時は useOptimistic が自動で元に戻す
  }

  return (
    <form action={likeAction}>
      <button type="submit">❤️ {optimisticLikes}</button>
    </form>
  );
}

import { Suspense, use } from "react";

type Comment = { id: string; body: string };

function Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
  const comments = use(commentsPromise);         // Suspend してくれる
  return (
    <ul>{comments.map((c) => <li key={c.id}>{c.body}</li>)}</ul>
  );
}

export function CommentsSection({ postId }: { postId: string }) {
  const commentsPromise = fetchComments(postId); // render の外で作っても OK
  return (
    <Suspense fallback={<p>読み込み中...</p>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

function Heading({ children }: { children?: React.ReactNode }) {
  if (!children) return null;              // ← useContext では書けなかった
  const theme = use(ThemeContext);         // use() なら early return 後でも OK
  return <h1 style={{ color: theme.color }}>{children}</h1>;
}

import { forwardRef } from "react";

const MyInput = forwardRef<HTMLInputElement, { placeholder: string }>(
  function MyInput({ placeholder }, ref) {
    return <input ref={ref} placeholder={placeholder} />;
  }
);

type Props = {
  placeholder: string;
  ref?: React.Ref<HTMLInputElement>;
};

export function MyInput({ placeholder, ref }: Props) {
  return <input ref={ref} placeholder={placeholder} />;
}

// 使う側は変わらない
// <MyInput ref={inputRef} placeholder="..." />

<input
  ref={(el) => {
    console.log("mounted", el);
    return () => {
      console.log("unmounted");   // ref 解除時に呼ばれる
    };
  }}
/>

const ThemeContext = createContext<"light" | "dark">("light");

// 従来
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// React 19（こちらが推奨）
<ThemeContext value="dark">
  <App />
</ThemeContext>

export function BlogPost({ post }: { post: Post }) {
  return (
    <article>
      <title>{post.title} | codingls.com</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title"       content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <link rel="canonical" href={`https://example.com/${post.slug}`} />

      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  );
}

function Layout() {
  return (
    <>
      <link rel="stylesheet" href="/reset.css"  precedence="default" />
      <link rel="stylesheet" href="/theme.css"  precedence="high"    />
      <link rel="stylesheet" href="/print.css"  precedence="low"     />
      <main>...</main>
    </>
  );
}
// 同一 URL を複数コンポーネントで書いても React が一度しか挿入しない

import { preinit, preload, preconnect, prefetchDNS } from "react-dom";

function HomePage() {
  // 後続で使うスクリプトを先に初期化
  preinit("https://cdn.example.com/analytics.js", { as: "script" });
  // フォント・CSS を先行ロード
  preload("/fonts/Noto-Sans-JP.woff2", { as: "font", type: "font/woff2", crossOrigin: "anonymous" });
  // 別オリジンへの接続を先に確立
  preconnect("https://api.example.com");
  // DNS 解決だけ先行
  prefetchDNS("https://metrics.example.com");

  return <div>...</div>;
}

// app/posts/page.tsx（Next.js App Router）
// "use client" なし = Server Component
import { prisma } from "@/lib/prisma";

export default async function PostsPage() {
  const posts = await prisma.post.findMany({ orderBy: { createdAt: "desc" } });
  return (
    <ul>
      {posts.map((p) => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

// app/posts/actions.ts
"use server";
import { prisma } from "@/lib/prisma";
import { revalidatePath } from "next/cache";

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  await prisma.post.create({ data: { title } });
  revalidatePath("/posts");
}

// app/posts/new/page.tsx
import { createPost } from "../actions";

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <button>作成</button>
    </form>
  );
}

import { Activity, useState } from "react";

export function TabbedView() {
  const [active, setActive] = useState<"a" | "b">("a");

  return (
    <>
      <nav>
        <button onClick={() => setActive("a")}>A</button>
        <button onClick={() => setActive("b")}>B</button>
      </nav>

      <Activity mode={active === "a" ? "visible" : "hidden"}>
        <TabA />   {/* 非表示時も state は残る */}
      </Activity>
      <Activity mode={active === "b" ? "visible" : "hidden"}>
        <TabB />
      </Activity>
    </>
  );
}

import { useEffect, useEffectEvent } from "react";

type Props = { roomId: string; theme: "light" | "dark" };

function ChatRoom({ roomId, theme }: Props) {
  // theme が変わっても effect は再実行したくない
  const onConnected = useEffectEvent(() => {
    showNotification("Connected!", theme);
  });

  useEffect(() => {
    const conn = createConnection(roomId);
    conn.on("connected", () => onConnected());
    conn.connect();
    return () => conn.disconnect();
  }, [roomId]);                       // theme は依存に入れなくて OK

  return <h1>{roomId}</h1>;
}

npm install --save-exact react@19 react-dom@19
npm install --save-dev @types/react@19 @types/react-dom@19

# Compiler も一緒に
npm install --save-dev babel-plugin-react-compiler eslint-plugin-react-compiler