React 19 apresenta vários novos ganchos poderosos que revolucionam como lidamos com formulários e gerenciamos atualizações otimistas em nossos aplicativos. Neste blog, exploraremos o UseFormStatus, UseActionState e Usetimistic - três ganchos que tornam nossos aplicativos REACT mais responsivos e amigáveis.

UseFormStatus: Manuseio de formulário aprimorado

O useFormStatus Hook fornece informações em tempo real sobre os envios de formulários, facilitando a criação de formulários responsivos e acessíveis. Vamos explorar como esse gancho melhora os recursos de manuseio de formulários do React 18.

Exemplo 1: Estado básico de carregamento de forma

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

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

function SignupForm() {
  return (
    

No React 18, você precisaria gerenciar manualmente os estados de carregamento usando o uso de uso. O novo useFormStatus Hook lida automaticamente isso, reduzindo o código da caldeira.

Exemplo 2: Estados de forma múltipla

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

  return (
    

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

function ContactForm() {
  return (
    

Exemplo 3: Status de validação do formulário

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

  return (
    

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

function RegistrationForm() {
  return (
    

Exemplo 4: Progresso em várias etapas

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





  
  
  Exemplo 2: História da Ação




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

  return (
    

      
Recent Actions
      

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

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





  
  
  Exemplo 3: Mecanismo de repetição




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

  return (
    

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





  
  
  Exemplo 4: fila de ação




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

  return (
    

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

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





  
  
  Exemplo 5: Estatísticas de ação




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

  return (
    

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





  
  
  Usetimistic: atualizações suaves da interface do usuário


 O gancho useptimista permite atualizações imediatas da interface do usuário enquanto aguardam as respostas do servidor, criando uma experiência mais responsiva do usuário. 


  
  
  Exemplo 1: Lista de Todo Otimista




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





  
  
  Exemplo 2: Otimista como botão




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





  
  
  Exemplo 3: Tópico de comentário otimista




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





  
  
  Exemplo 5: Configurações otimistas do usuário




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




 Lembre-se de verificar a documentação oficial do React para obter as informações mais atualizadas e as melhores práticas ao usar esses ganchos em seus aplicativos. 

 Codificação feliz!