Novo Hook

React Hook Guide UseOptimistic

Resposta direta: useOptimistic melhora UX percebida — sempre planeje rollback quando o server discordar.

Experiência Reativa

Domine o UseOptimistic

Um novo hook do React para criar interfaces otimistas de forma simples e elegante. Impressione o usuário mesmo com conexões lentas.

100%

React Native

UX+

Melhoria Visível

use-optimistic.tsx

import { useOptimistic } from "react" function CommentForm() { const [comments, setOptimisticComment] = useOptimistic([], (state, newComment) => [...state, newComment] ) const sendComment = async (text) => { setOptimisticComment({ text }) await fetch('/api/comments', { method: 'POST', body: text }) } return ( <form onSubmit={(e) => { e.preventDefault(); sendComment(e.target.text.value) }}> <input name="text" /> <button type="submit">Enviar</button> <ul> {comments.map((c, i) => <li key={i}>{c.text}</li>)} </ul> </form> ) }

O que é UI Otimista?

É uma técnica que melhora a experiência do usuário mostrando o sucesso de uma ação imediatamente, mesmo antes da resposta do servidor.

Imagine postar um comentário em uma rede social. Mesmo com internet lenta, o comentário aparece na tela instantaneamente como se tivesse funcionado. Isso é feedback otimista. O hook UseOptimistic permite implementar isso facilmente em suas aplicações com React.

Vantagens Do UseOptimistic

Por que aplicar interfaces otimistas nas suas aplicações React

Rapidez na UI

Melhora percepção de performance mesmo em conexões lentas

Implementação Simples

Gerencie estados provisórios com poucas linhas de código

UX Agradável

Menos frustração, mais fluidez na interface

Exemplo Prático

import { useOptimistic } from "react"

function CommentForm() {
  const [comments, setComment] = useOptimistic([], 
    (prev, next) => [...prev, next]
  )
  
  const handleSubmit = async (text) => {
    setComment({ text })
    await fetch("/api/comments", { method: "POST", body: text })
  }
  
  return (
    <form onSubmit={e => {
      e.preventDefault()
      handleSubmit(e.target.text.value)
    }}>
      <input name="text" />
      <button type="submit">Enviar</button>
      <ul>
        {comments.map((c, i) => <li key={i}>{c.text}</li>)}
      </ul>
    </form>
  )
}

Leitura relacionada: Curso React · Curso Next.js · shadcn tutorial · Cursos.

Perguntas frequentes

Quando usar?

Ações frequentes com alta chance de sucesso (like, rename).

Substitui loading state?

Complementa. Erro ainda precisa UI.

Com Next/React 19?

Confira a versão do React do seu app.

Armadilha?

Otimismo sem reconciliar estado do servidor.

Continue: Curso React · Curso Next.js · shadcn tutorial · Cursos.

Pronto para elevar suas UIs?

Aprenda a usar o UseOptimistic de forma prática e eficiente