Hook useOptimistic

Implementa actualizaciones optimistas de UI para mejor experiencia de usuario

¿Qué es useOptimistic?

useOptimistic te permite mostrar un estado diferente mientras una acción asíncrona está en curso. Acepta algún estado como argumento y devuelve una copia de ese estado que puede ser diferente durante acciones asíncronas.

Cómo funciona:

Toma el estado actual y una función de actualización como parámetros
Devuelve el estado optimista y una función para agregar actualizaciones optimistas
Inmediatamente muestra el estado optimista al usuario
Revierte al estado real cuando la acción asíncrona se completa

Perfecto para:

Botones de me gusta y reacciones
Agregar comentarios o publicaciones
Interacciones de lista de tareas
Cualquier acción donde la retroalimentación inmediata mejora la UX

Ejemplo 1: Botón de Me Gusta

Me gusta optimista con sincronización del servidor

Entendiendo los React Hooks

Los React hooks han revolucionado cómo escribimos componentes de React. Nos permiten usar estado y otras características de React sin escribir un componente de clase.

¡Intenta hacer clic en el botón de me gusta varias veces rápidamente para ver las actualizaciones optimistas en acción!

Ejemplo 2: Lista de Tareas

Agregar tareas optimistamente mientras se sincroniza con el servidor

Aprender React hooks

Construir una app de tareas

Dominar useOptimistic

Todas las acciones se actualizan optimistamente mientras se sincronizan con el servidor.

Implementación del Código

'use client'

import { useOptimistic, useState } from 'react'

type Mensaje = {
  id: string
  texto: string
  enviando?: boolean
}

export default function AppChat() {
  const [mensajes, setMensajes] = useState<Mensaje[]>([])
  const [mensajesOptimistas, agregarMensajeOptimista] = useOptimistic(
    mensajes,
    (estado, nuevoMensaje: string) => [
      ...estado,
      { id: Date.now().toString(), texto: nuevoMensaje, enviando: true }
    ]
  )

  async function enviarMensaje(formData: FormData) {
    const mensaje = formData.get('mensaje') as string
    
    // Agregar mensaje optimista inmediatamente
    agregarMensajeOptimista(mensaje)
    
    // Enviar al servidor
    try {
      const respuesta = await fetch('/api/mensajes', {
        method: 'POST',
        body: JSON.stringify({ texto: mensaje })
      })
      const nuevoMensaje = await respuesta.json()
      
      // Actualizar con mensaje real del servidor
      setMensajes(prev => [...prev, nuevoMensaje])
    } catch (error) {
      // Manejar error - la actualización optimista se revertirá
      console.error('Error al enviar mensaje:', error)
    }
  }

  return (
    <div>
      {mensajesOptimistas.map(mensaje => (
        <div key={mensaje.id} className={mensaje.enviando ? 'opacity-50' : ''}>
          {mensaje.texto}
        </div>
      ))}
      <form action={enviarMensaje}>
        <input name="mensaje" placeholder="Escribe un mensaje..." />
        <button type="submit">Enviar</button>
      </form>
    </div>
  )
}