function FormProgress() {
  const { pending, step, totalSteps } = useFormStatus();

  return (
    

      





  
  
  Example 5: File Upload Progress




function UploadProgress() {
  const { pending, progress } = useFormStatus();

  return (
    

      {pending && progress && (
        

          





  
  
  useActionState: Managing Action Results


The useActionState hook provides a way to track the state of form actions and server mutations, making it easier to handle success and error states.


  
  
  Example 1: Basic Action State




function SubmissionStatus() {
  const state = useActionState();

  return (
    

      {state.status === 'success' && 
Submission successful!
}
      {state.status === 'error' && 
Error: {state.error.message}
}
    
  );
}

function CommentForm() {
  return (
    
 {
      await submitComment(formData);
    }}>
      
      
      
    
  );
}




関数actionhistory（）{
  const state = useActionState（）;

  戻る （
    

      
最近のアクション
      

        {state.history.map（（action、index）=>（
          

            {action.type}  -  {action.timestamp}
            {action.status === 'error' && `（faild：$ {action.error.message}）`}
          
        ））}
      
    
  ）;
}




function ActionHistory() {
  const state = useActionState();

  return (
    

      
Recent Actions
      

        {state.history.map((action, index) => (
          

            {action.type} - {action.timestamp}
            {action.status === 'error' && ` (Failed: ${action.error.message})`}
          
        ))}
      
    
  );
}




 function retryableAction（）{
  const state = useActionState（）;

  戻る （
    

      {state.status === 'エラー' &&（
         state.retry（）}
          無効= {state.retrying}
        >
          {state.retrying？ '再試合...'： 'retry'}
        
      ）}
    
  ）;
}




function RetryableAction() {
  const state = useActionState();

  return (
    

      {state.status === 'error' && (
         state.retry()}
          disabled={state.retrying}
        >
          {state.retrying ? 'Retrying...' : 'Retry'}
        
      )}
    
  );
}




関数actionqueue（）{
  const state = useActionState（）;

  戻る （
    

      
保留中のアクション
      {state.queue.map（（action、index）=>（
        

          {action.type}  -  {action.queuedat}でqueued
           action.cancel（）}> cancel 
        
      ））}
    
  ）;
}




function ActionQueue() {
  const state = useActionState();

  return (
    

      
Pending Actions
      {state.queue.map((action, index) => (
        

          {action.type} - Queued at {action.queuedAt}
           action.cancel()}>Cancel
        
      ))}
    
  );
}




関数actionstats（）{
  const state = useActionState（）;

  戻る （
    

      
アクション統計
      
成功率：{state.stats.successrate}％
      
平均期間：{state.stats.avgduration} ms 
      
合計アクション：{state.stats.total} 
    
  ）;
}




function ActionStats() {
  const state = useActionState();

  return (
    

      
Action Statistics
      
Success Rate: {state.stats.successRate}%
      
Average Duration: {state.stats.avgDuration}ms
      
Total Actions: {state.stats.total}
    
  );
}


 useoptimisticフックは、サーバーの応答を待っている間に即時のUI更新を可能にし、より応答性の高いユーザーエクスペリエンスを作成します。


  
  
  例1：楽観的なTODOリスト




関数todolist（）{
  const [todos、setodos] = uesestate（[]）;
  const [optimistictodos、audoptimistictodo] = useoptimistic（
    トドス、
    （状態、newtodo）=> [... state、newtodo]
  ）;

  async関数addtodo（formdata）{
    const newtodo = {
      ID：date.now（）、
      テキスト：formdata.get（ 'todo'）、
      完了：false
    };

    audoptimistictodo（newtodo）;
    Savetodo（Newtodo）を待っています。
  }

  戻る （
    

      

        
         todo を追加します
      
      

        {somistictodos.map（todo =>（
          
 {todo.text} 
        ））}
      
    
  ）;
}




function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  async function addTodo(formData) {
    const newTodo = {
      id: Date.now(),
      text: formData.get('todo'),
      completed: false
    };

    addOptimisticTodo(newTodo);
    await saveTodo(newTodo);
  }

  return (
    

      

        
        Add Todo
      
      

        {optimisticTodos.map(todo => (
          
{todo.text}
        ))}
      
    
  );
}




 function likebutton（{postid、initiallikes}）{
  const [like、setlikes] = uesestate（initiallikes）;
  const [gripisticlikes、audoptimisticlike] = useoptimistic（
    いいね
    （状態）=> state 1
  ）;

  async関数handlelike（）{
    audptimisticlike（）;
    likepost（postid）を待っています。
  }

  戻る （
    
      {gripicisticlikes} witt
    
  ）;
}




function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (state) => state   1
  );

  async function handleLike() {
    addOptimisticLike();
    await likePost(postId);
  }

  return (
    
      {optimisticLikes} Likes
    
  );
}




 function commentthread（{postid}）{
  const [comments、setcomments] = uesestate（[]）;
  const [gripisticcomments、audoptimisticcomment] = useoptimistic（
    コメント、
    （State、NewComment）=> [... State、NewComment]
  ）;

  async関数submitcomment（formdata）{
    constコメント= {
      ID：date.now（）、
      テキスト：formdata.get（ 'コメント'）、
      保留中：本当
    };

    audptimisticcomment（コメント）;
    SaveCommentを待っています（PostID、コメント）;
  }

  戻る （
    

      

        
        コメント
      
      {stryisticcomments.map（comment =>（
        





  
  
  例4：楽観的なショッピングカート
function CommentThread({ postId }) {
  const [comments, setComments] = useState([]);
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newComment) => [...state, newComment]
  );

  async function submitComment(formData) {
    const comment = {
      id: Date.now(),
      text: formData.get('comment'),
      pending: true
    };

    addOptimisticComment(comment);
    await saveComment(postId, comment);
  }

  return (
    

      

        
        Comment
      
      {optimisticComments.map(comment => (
        





  
  
  Example 4: Optimistic Shopping Cart




function ShoppingCart() {
  const [cart, setCart] = useState([]);
  const [optimisticCart, updateOptimisticCart] = useOptimistic(
    cart,
    (state, update) => {
      const { type, item } = update;
      switch (type) {
        case 'add':
          return [...state, item];
        case 'remove':
          return state.filter(i => i.id !== item.id);
        case 'update':
          return state.map(i => i.id === item.id ? item : i);
        default:
          return state;
      }
    }
  );

  async function updateCart(type, item) {
    updateOptimisticCart({ type, item });
    await saveCart({ type, item });
  }

  return (
    

      {optimisticCart.map(item => (
        

          {item.name} - ${item.price}
           updateCart('remove', item)}>Remove
        
      ))}
    
  );
}




関数usersettings（）{
  const [settings、setsettings] = uesestate（{}）;
  const [stormisticsettings、updateoptimisticsetting] = useoptimistic（
    設定、
    （state、update）=>（{
      ...州、
      [update.key]：update.value
    }）
  ）;

  async関数更新セット（key、value）{
    updateoptimisticsetting（{key、value}）;
    savesettings（{[key]：value}）を待っています。
  }

  戻る （
    

      

        
          テーマ：
           updatesetting（ 'theme'、e.target.value）}
          >
             light 
             dark 
          
        
      
      

        
          通知：
           updatesetting（ 'notifications'、e.target.checked）}
          />
        
      
    
  ）;
}




function UserSettings() {
  const [settings, setSettings] = useState({});
  const [optimisticSettings, updateOptimisticSetting] = useOptimistic(
    settings,
    (state, update) => ({
      ...state,
      [update.key]: update.value
    })
  );

  async function updateSetting(key, value) {
    updateOptimisticSetting({ key, value });
    await saveSettings({ [key]: value });
  }

  return (
    

      

        
          Theme:
           updateSetting('theme', e.target.value)}
          >
            Light
            Dark
          
        
      
      

        
          Notifications:
           updateSetting('notifications', e.target.checked)}
          />
        
      
    
  );
}


ハッピーコーディング！