"use client";
/**
 * useTransition Sample
 * テキスト入力中に、UIがカクつくような重い処理をuseTransitionでラップすると、入力の快適さを保ったまま重い処理を実行できる
 */

import { useState, useTransition } from "react";

const ITEMS = Array.from({ length: 1000 }, (_, i) => `アイテム ${i}`);

export default function TransitionDemo() {
  const [query, setQuery] = useState("");
  const [filtered, setFiltered] = useState(ITEMS);
  const [isPending, startTransition] = useTransition();

  function SlowItem({ text }: { text: string }) {
    const start = Date.now();
    while (Date.now() - start < 1) {} // 遅延処理
    return <li>{text}</li>;
  }

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const value = e.target.value;
    setQuery(value);

    // setFiltered(ITEMS.filter((item) => item.includes(value)));

    // 以下のような描画に影響のある処理をstartTransitionでラップすると、入力を妨げない
    startTransition(() => {
      setFiltered(ITEMS.filter((item) => item.includes(value)));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} placeholder="絞り込み" />
      {isPending && <p>Pending...</p>}
      <ul>
        {filtered.map((item) => (
          <SlowItem key={item} text={item} />
        ))}
      </ul>
    </div>
  );
}

"use client";

/**
 * useDeferredValue Sample
 */

import { useState, useDeferredValue } from "react";

const ITEMS = Array.from({ length: 1000 }, (_, i) => `アイテム ${i}`);

function SlowItem({ text }: { text: string }) {
  const start = Date.now();
  while (Date.now() - start < 1) {}
  return <li>{text}</li>;
}

function HeavyList({ query }: { query: string }) {
  const deferredQuery = useDeferredValue(query);
  const filtered = ITEMS.filter((item) => item.includes(deferredQuery));

  return (
    <>
      {/* <p>useDeferredValueなし：{query}</p> */}
      <p>useDeferredValueあり：{deferredQuery}</p>
      <ul>
        {filtered.map((item) => (
          <SlowItem key={item} text={item} />
        ))}
      </ul>
    </>
  );
}

export default function DeferredDemo() {
  const [query, setQuery] = useState("");

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="絞り込み"
      />
      <HeavyList query={query} />
    </div>
  );
}

function EmailField() {
    return (
      <>
        <label htmlFor="email">メール</label>
        <input id="email" type="email" />
      </>
    )
}

<EmailField />
<EmailField />

import { useId } from 'react'

function EmailField() {
    const id = useId()

    return (
      <>
        <label htmlFor={id}>メール</label>
        <input id={id} type="email" />
      </>
    )
}

<EmailField /> // 別々のid
<EmailField /> // 別々のid

function handleClick() {
  setCount(c => c+1)
  setFlag(f => !f)
  // ここで一度だけまとめてレンダー
}

setTimeout(() => {
  setCount(c => c+1) // レンダー
  setFlag(f => !f) // レンダー
}, 200)

  onClick 発火
    └─ React がキャッチ
         └─ バッチングフラグ ON
              └─ setCount() → キューに積む
              └─ setFlag()  → キューに積む
         └─ バッチングフラグ OFF
              └─ キューをまとめて1回レンダー

  setState() 発火
      │
      ▼
  差分計算開始（同期・中断不可）
      │
      ├─ App を処理
      │   └─ Header を処理
      │       └─ Nav を処理  ←─ ここで時間がかかっても止められない
      │           └─ ...
      │               └─ ...（再帰的に全部終わるまで走り続ける）
      │
      ▼
  DOM 更新

  この間、ユーザー入力・アニメーションはすべて待ち状態

  setState() 発火
      │
      ▼
  Scheduler が優先度を判定
      │
      ▼
  Fiber ノード単位でループ処理（中断可能）

    [App] → [Header] → [Nav] → [List] → [Item] → ...
       ↑
       │ 「時間切れ or 高優先度の割り込みあり」で中断
       │
       ▼
    ユーザー入力など高優先度タスクを先に処理
       │
       ▼
    中断した [Nav] から再開
       │
       ▼
  全ノード処理完了 → DOM 更新

  Stack Reconciler        Fiber Reconciler
  ─────────────────       ─────────────────
  再帰呼び出し            ループ（ポインタ移動）

  コールスタック           Fiber ノード（リンクリスト）
  ┌─────────┐             ┌──────┐  child   ┌──────┐
  │  Item   │             │ App  │ ───────▶ │Header│
  ├─────────┤             └──────┘          └──────┘
  │  List   │               │ return          │ sibling
  ├─────────┤               ▼                ▼
  │   Nav   │             「どこまで        ┌──────┐
  ├─────────┤              処理したか」      │ Nav  │
  │  Header │              を保持できる      └──────┘
  ├─────────┤
  │   App   │             → 任意の場所で中断・再開可能
  └─────────┘
  途中停止不可

  // NG: クリーンアップなし
  useEffect(() => {
    window.addEventListener('resize', handleResize)
  }, [])
  // 2回実行されると listener が2つ登録される

  // OK: クリーンアップあり
  useEffect(() => {
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])
  // アンマウント時に解除 → 再マウントで1つだけ登録される

async function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

export default async function SlowComponent({ ms }: { ms: number }) {
  await sleep(ms);
  return <p>2秒後に表示されるコンテンツ</p>;
}

import { Suspense } from "react";
import SlowComponent from "./SlowComponent";

export default function Page() {
  return (
    <div>
      <h1>Suspenseテスト</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <SlowComponent ms={2000} />
      </Suspense>
    </div>
  );
}

import HeavyComponentWrapper from "./HeavyComponentWrapper";

export default function Page() {
  return <HeavyComponentWrapper />;
}

"use client";

import dynamic from "next/dynamic";

const HeavyComponent = dynamic(() => import("./HeavyComponent"), {
  ssr: false,
  loading: () => <div>Loading...</div>,
});

export default function Page() {
  return <HeavyComponent />;
}

"use client";

export default function HeavyComponent() {
  return <p>Heavy component content</p>;
}

startTransition(async () => { // Action
    await saveData(init) // 非同期処理
    setResult('保存完了')
})

const [isPending, setIsPending] = useState(false)
const [error, setError] = useState(null)

async function handleSubmit() {
    setIsPending(true)
    try {
        await saveData(input)
    } catch (e) {
      setError(e)
    } finally {
      setIsPending(false)
    }
}

// fnがActionとして扱われる
<form action ={async (formData) => {
  await saveData(formData.get('title'))
}}>

const [state, formAction, isPending] = useActionState(fn, initialState)

// React 18以前（自前で管理）
const [isPending, setIsPending] = useState(false)
const [error, setError] = useState(null)
const [result, setResult] = useState(null)

// React19
const [state, formAction, isPending] = useActionState(fn, null)

"use server";

export async function submitPost(
  prevState: { error?: string; success?: boolean } | null,
  formData: FormData,
) {
  const title = formData.get("title") as string;

  if (!title) return { error: "タイトルは必須" };

  // 送信の遅延をシミュレート
  await new Promise((resolve) => setTimeout(resolve, 1000));

  return { success: true };
}

import PostForm from "./PostForm";

export default function Page() {
  return (
    <div>
      <PostForm />{" "}
    </div>
  );
}

"use client";

import { useActionState } from "react";
import { submitPost } from "./action";

export default function PostForm() {
  const [state, formAction, isPending] = useActionState(submitPost, null);

  return (
    <form action={formAction}>
      <input name="title" placeholder="タイトル" />
      <button type="submit" disabled={isPending}>
        {isPending ? "送信中..." : "送信"}
      </button>
      {state?.error && <p style={{ color: "red" }}>{state.error}</p>}
      {state?.success && <p style={{ color: "green" }}>送信成功！</p>}
    </form>
  );
}

const [isPending, setIsPending] = useState(false)
const [error, setError] = useState(null)
const [success, setSuccess] = useState(false)

async function handleSubmit(e: React.FormEvent) {
  e.preventDefault()
  setIsPending(true)

  try {
    submitPost(title)
    setSuccess(true)
  } catch {
    setError('エラーが発生')
  } finaly {
    setIsPending(false)
  }
}

<form onSubmit={handleSumit}>

const [state, formAction, isPending] = useActionState(submitPost, null)

<form action={formAction}>

<form action={formAction}>
    <SubmitButton /> {/* props不要 */}
</form>

function SubmitButton() {
    const { pending } = useFormStatus()
    return <button disabled={pending}>送信</button>
}

送信 → UI即更新 → サーバ応答 → 成功：そのまま / 失敗：ロールバック

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn)

"use client";

import { useOptimistic, useTransition, useState } from "react";
import { addPost } from "./action";

type Post = { id: number; title: string };

export default function PostList({ initialPosts }: { initialPosts: Post[] }) {
  const [posts, setPosts] = useState(initialPosts);
  const [isPending, startTransition] = useTransition();
  const [optimisticPosts, addOptimisticPost] = useOptimistic(
    posts,
    (current, newTitle: string) => [
      ...current,
      { id: Date.now(), title: `${newTitle}（送信中...）` },
    ],
  );

  function handleSubmit(formData: FormData) {
    const title = formData.get("title") as string;
    startTransition(async () => {
      addOptimisticPost(title);
      const newPost = await addPost(formData);
      setPosts((prev) => [...prev, newPost]);
    });
  }

  return (
    <div>
      <form action={handleSubmit}>
        <input type="text" name="title" placeholder="タイトル" />
        <button type="submit" disabled={isPending}>
          追加
        </button>
      </form>
      <hr />
      <ul>
        {optimisticPosts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  );
}

// 通常のフックは条件分岐内で使えない
if(condition) {
    const [state] = useState(...) // NG
}

// use() は条件分岐内でも使える
if(condition) {
    const data = use(promise) // OK
}

"use client";

import { use } from "react";

type Post = {
  id: number;
  title: string;
};

export default function PostList({
  postPromise,
}: {
  postPromise: Promise<Post[]>;
}) {
  const posts = use(postPromise);

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

import { Suspense } from "react";
import PostList from "./PostList";

async function fetchPosts() {
  const res = await fetch(
    "https://jsonplaceholder.typicode.com/posts?_limit=5",
  );
  return res.json();
}

export default function Page() {
  const postsPromise = fetchPosts();

  return (
    <Suspense fallback="Loading...">
      <PostList postPromise={postsPromise} />
    </Suspense>
  );
}

条件分岐内で使える意味

  'use client'

  export default function PostList({ postsPromise, showDetails }) {
    if (!showDetails) {
      return <p>詳細なし</p>  // ← ここで早期リターン
    }

    // 早期リターンの後でも use() は使える
    const posts = use(postsPromise)
    return <ul>...</ul>
  }

// React 18以前
const Input = forwardRef<HTMLInputElement, { placeholder: string }>(
    (props, ref) => <input ref={ref} {...props} />    
)

// React 19
function Input({ref, ...props}: {ref: React.Ref<HTMLInputElement>; placeholder: string}) {
    return <input ref={ref} {...props} />
}

const ThemeContext = createContext('light')

// React 18
<ThemeContext.Provider value="dark">
    <App />
</ThemeContext>

// React 19
<ThemeContext value="dark">
    <App />
</ThemeContext>