React 19のActions完全攻略！useActionStateとuseOptimisticで脱ボイラープレート

const [state, formAction, isPending] = useActionState(actionFunction, initialState, permalink?);

import { useState } from 'react';

export function UpdateNameForm() {
  const [name, setName] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setError(null);
    setSuccess(false);

    try {
      const res = await updateNameApi(name);
      if (res.error) {
        setError(res.error);
      } else {
        setSuccess(true);
        setName(''); // 手動で入力値をクリア
      }
    } catch (err) {
      setError('通信エラーが発生しました');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        disabled={isSubmitting}
        placeholder="新しいお名前"
      />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '保存中...' : '更新'}
      </button>
      {error && <p className="error">{error}</p>}
      {success && <p className="success">更新しました！</p>}
    </form>
  );
}

import { useActionState } from 'react';

// Action関数：(直前のstate, 送信されたFormData) を受け取る
async function updateNameAction(prevState: any, formData: FormData) {
  const newName = formData.get('name') as string;
  const res = await updateNameApi(newName);
  return res; // { error?: string, success?: boolean }
}

export function UpdateNameForm() {
  const [state, formAction, isPending] = useActionState(updateNameAction, null);

  return (
    <form action={formAction}>
      <input
        name="name"
        type="text"
        disabled={isPending}
        placeholder="新しいお名前"
      />
      <button type="submit" disabled={isPending}>
        {isPending ? '保存中...' : '更新'}
      </button>
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">更新しました！</p>}
    </form>
  );
}

const [optimisticState, setOptimistic] = useOptimistic(passthroughState, updateFn);

import { useOptimistic, useTransition } from 'react';

type LikeProps = {
  likesCount: number;
  isLiked: boolean;
  onLikeApi: () => Promise<{ likesCount: number; isLiked: boolean }>;
};

export function LikeButton({ likesCount, isLiked, onLikeApi }: LikeProps) {
  // 楽観的ステートの定義
  const [optimisticLike, setOptimisticLike] = useOptimistic(
    { likesCount, isLiked, sending: false },
    (state, update: boolean) => ({
      likesCount: update ? state.likesCount + 1 : state.likesCount - 1,
      isLiked: update,
      sending: true, // 送信中フラグ
    })
  );

  const [isPending, startTransition] = useTransition();

  const handleToggleLike = () => {
    const nextLiked = !optimisticLike.isLiked;

    startTransition(async () => {
      // 1. サーバーを待たずにUIを即時更新！
      setOptimisticLike(nextLiked);

      // 2. 実際のサーバー通信を実行
      await onLikeApi();
      // ※ 通信が完了すると自動的にPropsの確定値に同期され、
      //    例外発生時は自動的にロールバックされます！
    });
  };

  return (
    <button
      onClick={handleToggleLike}
      className={`like-btn ${optimisticLike.isLiked ? 'is-active' : ''}`}
      aria-label="いいね"
    >
      <span className="heart">{optimisticLike.isLiked ? '❤️' : '🤍'}</span>
      <span className="count">{optimisticLike.likesCount}</span>
      {optimisticLike.sending && <span className="sync-badge">同期中...</span>}
    </button>
  );
}

import { useFormStatus } from 'react-dom';

export function SubmitButton({ children }: { children: React.ReactNode }) {
  // 親の <form> の状態を自動取得
  const { pending, data, method, action } = useFormStatus();

  return (
    <button
      type="submit"
      disabled={pending}
      className={`btn-submit ${pending ? 'is-loading' : ''}`}
    >
      {pending ? (
        <span className="spinner">処理中...🐾</span>
      ) : (
        children
      )}
    </button>
  );
}

import { useActionState, useOptimistic, useRef } from 'react';
import { useFormStatus } from 'react-dom';

type Comment = {
  id: string;
  text: string;
  author: string;
  isSending?: boolean;
};

// 共通送信ボタンコンポーネント
function SubmitBtn() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="btn-primary">
      {pending ? '送信中...' : 'コメントを投稿する'}
    </button>
  );
}

// 親コンポーネント
export function CommentSection({ initialComments }: { initialComments: Comment[] }) {
  const formRef = useRef<HTMLFormElement>(null);

  // 1. useActionState でコメント一覧の更新ロジックを定義
  const [comments, formAction] = useActionState(
    async (prevComments: Comment[], formData: FormData) => {
      const text = formData.get('comment') as string;
      const author = '赤猫座の常連さん';

      // 2. 楽観的に先行反映
      setOptimisticComments({
        id: crypto.randomUUID(),
        text,
        author,
        isSending: true,
      });

      // フォームの入力欄をクリア
      formRef.current?.reset();

      // 3. 実際のAPI通信
      const savedComment = await apiPostComment({ text, author });
      return [...prevComments, savedComment];
    },
    initialComments
  );

  // 4. useOptimistic で先行表示用リストを作成
  const [optimisticComments, setOptimisticComments] = useOptimistic(
    comments,
    (state, newComment: Comment) => [...state, newComment]
  );

  return (
    <div class="comment-widget">
      <h3>コメント一覧（{optimisticComments.length}件）</h3>

      <ul className="comment-list">
        {optimisticComments.map((c) => (
          <li key={c.id} className={c.isSending ? 'comment--pending' : ''}>
            <strong>{c.author}</strong>
            <p>{c.text}</p>
            {c.isSending && <small className="badge">送信中...</small>}
          </li>
        ))}
      </ul>

      <form ref={formRef} action={formAction} className="comment-form">
        <textarea
          name="comment"
          required
          placeholder="あたたかい感想をお待ちしています🐾"
        />
        <SubmitBtn />
      </form>
    </div>
  );
}