Novo Hook

React Hook Guide UseOptimistic

Crie interfaces reativas e fluidas com experiências otimizadas para o usuário

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

Pronto para elevar suas UIs?

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