Especialização Frontend com React & TypeScript • Demonstrações Práticas Executáveis

🎯 Contexto e Objetivo Prático

Utilização das APIs nativas do React 19: useActionState para submissão assíncrona de formulários e useOptimistic para updates instantâneos.

💻 Código Fonte React 19 (TSX)

// OptimisticTodoList.tsx
import React, { useActionState, useOptimistic } from "react";

interface TodoItem {
  id: string;
  text: string;
  sending?: boolean;
}

async function createTodoAction(previousState: TodoItem[], formData: FormData): Promise<TodoItem[]> {
  const text = formData.get("todoText") as string;
  // Simulação de latência de rede de 1 segundo
  await new Promise(res => setTimeout(res, 1000));

  const newTodo: TodoItem = { id: `todo-${Date.now()}`, text };
  return [...previousState, newTodo];
}

export function OptimisticTodoList({ initialTodos }: { initialTodos: TodoItem[] }) {
  const [todos, formAction, isPending] = useActionState(createTodoAction, initialTodos);

  // useOptimistic exibe o item imediatamente antes da resposta do servidor
  const [optimisticTodos, setOptimisticTodo] = useOptimistic(
    todos,
    (state, newText: string) => [...state, { id: "temp-id", text: newText, sending: true }]
  );

  const handleSubmit = async (formData: FormData) => {
    const text = formData.get("todoText") as string;
    setOptimisticTodo(text);
    await formAction(formData);
  };

  return (
    <div className="p-4 max-w-sm">
      <form action={handleSubmit} className="flex gap-2 mb-4">
        <input name="todoText" required placeholder="Nova tarefa React 19..." className="border p-2 text-sm flex-1 rounded" />
        <button type="submit" disabled={isPending} className="bg-blue-600 text-white px-3 py-1 rounded text-sm">
          {isPending ? "Salvando..." : "Adicionar"}
        </button>
      </form>

      <ul className="space-y-1">
        {optimisticTodos.map(t => (
          <li key={t.id} className={`p-2 border rounded text-sm ${t.sending ? "opacity-50 italic" : ""}`}>
            {t.text} {t.sending && "(Enviando...)"}
          </li>
        ))}
      </ul>
    </div>
  );
}

🖥️ Saída de Renderização Visual e Comportamento

[Atualização Otimista React 19]
1. Usuário digita "Estudar React 19" e clica em Adicionar.
2. Interface exibe imediatamente: "Estudar React 19 (Enviando...)" [Latência percebida: ZERO]
3. Após 1000ms, o servidor confirma e o estado final é consolidado.