React 19 представляет несколько мощных новых крючков, которые революционизируют то, как мы обрабатываем формы и управляют оптимистичными обновлениями в наших приложениях. В этом блоге мы рассмотрим useFormStatus, UseactionState и UseSoptimistic - три крючка, которые делают наши приложения React более отзывчивыми и удобными для пользователя.

] Использование FormStatus: усовершенствованная обработка форм

useFormStatus Hook предоставляет информацию в режиме реального времени о представлениях формы, что облегчает создание адаптивных и доступных форм. Давайте рассмотрим, как этот крюк улучшается после возможностей обработки форм React 18.

] Пример 1: Основное состояние загрузки формы

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    

В React 18 вам нужно вручную управлять состояниями загрузки с помощью USESTATE. Новый крюк useFormStatus автоматически обрабатывает это, уменьшая код шаблона.

] Пример 2: Состояния с несколькими формами

function FormStatus() {
  const { pending, data, method } = useFormStatus();

  return (
    

      {pending && Submitting via {method}...}
      {!pending && data && Last submission: {new Date().toLocaleString()}}
    
  );
}

function ContactForm() {
  return (
    

] Пример 3: Статус проверки формы

function ValidationStatus() {
  const { pending, validationErrors } = useFormStatus();

  return (
    

      {validationErrors?.map((error, index) => (
        
{error}
      ))}
    
  );
}

function RegistrationForm() {
  return (
    

] Пример 4: многоэтапный прогресс

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);
    }}>
      
      
      
    
  );
}
]



]
  
  
  Пример 2: История действий
]



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

  return (
    

      
Recent Actions
      

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

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



]
  
  
  Пример 3: Механизм повторной попытки
]



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

  return (
    

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



]
  
  
  Пример 4: очередь действий
]



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

  return (
    

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

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



]
  
  
  Пример 5: Статистика действия
]



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

  return (
    

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



]
  
  
  USEOPTIMIST: плавные обновления пользовательского интерфейса
]

] UseOptimistic Hook позволяет немедленным обновлениям пользовательского интерфейса при ожидании ответов на серверы, создавая более отзывчивый пользовательский опыт. 
]

]
  
  
  Пример 1: Оптимистичный список TODO
]



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}
        ))}
      
    
  );
}
]



]
  
  
  Пример 2: кнопка оптимистичного подобного
]



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
    
  );
}
]



]
  
  
  Пример 3: Оптимистичный поток комментариев
]



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
        
      ))}
    
  );
}
]



]
  
  
  Пример 5: Оптимистичные настройки пользователя
]



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)}
          />
        
      
    
  );
}
]



 не забудьте проверить официальную документацию React на предмет наиболее современной информации и лучших практик при использовании этих крючков в ваших приложениях. 
]

 Happy Coding! 


          
]

            
        
]