Skill de Maestria em React 19 - Uma receita de skill Claude Code para orientação especializada em React 19

Q: Quais são os quatro novos hooks introduzidos no React 19?

useActionState(action, initialState) -- gerencia estado de formulário/action com rastreamento de pendência useOptimistic(state, updateFn) -- feedback instantâneo na UI durante operações assíncronas useFormStatus() -- lê o status da submissão do formulário pai de um componente filho use(resource) -- desempacota promises e context, pode ser chamado dentro de condicionais

Q: Como useActionState difere do antigo useFormState?

Renomeado de useFormState para useActionState Movido de react-dom para react Agora retorna isPending como um terceiro valor (não há necessidade de useFormStatus separado apenas para pending)

Q: Como funciona o ref como prop no React 19 e o que ele substitui?

forwardRef não é mais necessário (ainda funciona, mas está obsoleto) Componentes de função aceitam ref diretamente como uma prop

Q: Armadilha: O que acontece se você usar useFormStatus fora de um form?

Ele lê o status do elemento pai mais próximo Se não houver um formulário pai, ele não detectará nenhum estado de submissão Sempre renderize o componente que usa useFormStatus dentro de um , não no mesmo componente que cria o formulário

Q: Quais são as regras para Server Components no App Router?

Padrão no App Router (nenhum directive "use client" significa Server Component) Pode acessar diretamente bancos de dados, sistemas de arquivos e APIs exclusivas do servidor Não pode usar hooks, event handlers, APIs do navegador ou estado Props passadas para Client Components devem ser serializáveis

Q: Como tipar useActionState com TypeScript para uma action de formulário?

A action recebe previousState como seu primeiro argumento e FormData como segundo O tipo de retorno deve corresponder ao tipo do estado inicial

Q: Como o hook use() difere de useEffect?

use() desempacota recursos (Promises, Context) durante a renderização, não como um efeito colateral Ele requer um boundary acima quando usado com Promises Ao contrário de outros hooks, ele PODE ser chamado dentro de condicionais e loops Não use para fetching de dados inicial no Next.js -- use async Server Components em vez disso

Estas receitas de skill são projetadas para Claude Code, mas também funcionam com outros agentes de codificação de IA que suportam arquivos de skill/instrução.

Receita

O conteúdo completo do SKILL.md que você pode copiar para .claude/skills/react-19-mastery/SKILL.md:

---
name: react-19-mastery
description: "Orientação especializada sobre recursos do React 19, compilador, actions e novos hooks. Use quando solicitado para: ajuda com React 19, novos hooks, server components, compilador React, useActionState, useOptimistic, hook use(), migrar do React 18."
allowed-tools: "Read, Write, Edit, Glob, Grep, Bash(npm:*), Bash(npx:*), Agent"
---
 
# Maestria em React 19
 
Você é um especialista em React 19. Quando esta skill for invocada, forneça orientação autoritativa sobre os recursos, migração e melhores práticas do React 19.
 
## Referência de Recursos Principais do React 19
 
### Novos Hooks
 
1. **useActionState(action, initialState, permalink?)** - Gerencia o estado de formulário/action com rastreamento de pendência
   - Retorna [state, formAction, isPending]
   - Substitui useFormState (renomeado no React 19 estável)
   - Use para: qualquer submissão de formulário, integração de server actions, progressive enhancement
   - A action recebe o previousState como seu primeiro argumento
 
2. **useOptimistic(state, updateFn)** - Feedback instantâneo na UI durante operações assíncronas
   - Retorna [optimisticState, addOptimistic]
   - Reverte automaticamente quando o rerender do pai é concluído
   - Use para: likes, bookmarks, toggles, qualquer mutação onde você pode prever o resultado
 
3. **useFormStatus()** - Lê o status da submissão do formulário pai de um componente filho
   - Retorna { pending, data, method, action }
   - DEVE ser chamado de um componente renderizado dentro de um <form>
   - Use para: estados desabilitados de botões de submit, spinners de loading dentro de formulários
 
4. **use(resource)** - Desempacota promises e context condicionalmente
   - Funciona com Promises (compatível com Suspense) e Context
   - PODE ser chamado dentro de condicionais e loops (diferente de outros hooks)
   - Use para: ler dados assíncronos em renderização, leituras condicionais de context
 
### Compilador React
 
- Memoiza automaticamente componentes, hooks e expressões
- Elimina a maioria do uso manual de useMemo, useCallback e React.memo
- As Regras do React devem ser seguidas estritamente (sem mutações durante a renderização, ordem estável de chamadas de hook)
- Instalar: babel-plugin-react-compiler ou o plugin Vite/Next.js
- Validar com eslint-plugin-react-compiler antes de habilitar
 
### Server Components (RSC)
 
- Padrão no App Router (nenhum directive "use client" = Server Component)
- Pode acessar diretamente bancos de dados, sistemas de arquivos e APIs exclusivas do servidor
- Não pode usar hooks, event handlers, APIs do navegador ou estado
- Props passadas para Client Components devem ser serializáveis
 
### Server Actions
 
- Funções assíncronas marcadas com "use server" no topo do corpo da função ou arquivo
- Podem ser passadas para formulários como action={serverAction}
- Podem ser chamadas de Client Components como funções assíncronas regulares
- Sempre valide inputs no lado do servidor, mesmo que a validação no cliente exista
 
### ref como prop
 
- Componentes de função agora aceitam ref como uma prop regular
- forwardRef não é mais necessário (ainda funciona, mas está obsoleto)
- Padrão: function Input({ ref, ...props }) { return <input ref={ref} {...props} /> }
 
### Elevação de Metadados de Documento
 
- Tags <title>, <meta> e <link> em componentes são auto-elevadas para <head>
- Funciona tanto em Server Components quanto em Client Components
- Elimina a necessidade de next/head ou react-helmet em muitos casos
 
## Regras de Decisão
 
Quando um usuário perguntar sobre React 19, siga estas regras:
 
### Quando recomendar useActionState
- O usuário está construindo um formulário que envia dados
- O usuário precisa rastrear o estado pendente durante a submissão
- O usuário quer progressive enhancement (funciona sem JS)
- O usuário está migrando de useFormState
 
### Quando recomendar useOptimistic
- O usuário quer feedback instantâneo em uma mutação
- O resultado otimista é previsível a partir da entrada
- O usuário está construindo recursos de like/bookmark/toggle
- SEMPRE combine com tratamento de erros para reverter em caso de falha
 
### Quando recomendar use()
- O usuário precisa ler uma promise em um componente (envolva o pai com Suspense)
- O usuário precisa de acesso condicional a context
- NÃO recomende para fetching de dados inicial no Next.js (use async Server Components em vez disso)
 
### Quando recomendar React Compiler
- O usuário está no React 19 e tem uma codebase limpa seguindo as Regras do React
- O usuário tem problemas de performance devido à falta de memoização
- SEMPRE recomende executar eslint-plugin-react-compiler primeiro
- NÃO recomende se a codebase tiver padrões de mutação ou efeitos colaterais na renderização
 
## Padrões de Migração do React 18
 
### useFormState para useActionState
```tsx
// React 18 (react-dom)
import \{ useFormState \} from "react-dom";
const [state, formAction] = useFormState(action, initial);
 
// React 19 (react)
import \{ useActionState \} from "react";
const [state, formAction, isPending] = useActionState(action, initial);
// Nota: isPending agora está embutido, não há necessidade de useFormStatus apenas para pending

forwardRef para ref prop

// React 18
const Input = forwardRef<HTMLInputElement, Props>((props, ref) => (
  <input ref=\{ref\} \{...props\} />
));
 
// React 19
function Input(\{ ref, ...props \}: Props & \{ ref?: React.Ref<HTMLInputElement> \}) \{
  return <input ref=\{ref\} \{...props\} />;
\}

memo manual para React Compiler

// React 18 - memoização manual
const MemoComponent = React.memo((\{ data \}: Props) => \{
  const processed = useMemo(() => expensive(data), [data]);
  const handler = useCallback(() => doThing(data), [data]);
  return <Child data=\{processed\} onClick=\{handler\} />;
\});
 
// React 19 com Compiler - apenas escreva código puro
function Component(\{ data \}: Props) \{
  const processed = expensive(data);
  const handler = () => doThing(data);
  return <Child data=\{processed\} onClick=\{handler\} />;
\}

Erros Comuns

Usar useFormStatus fora de um form - Ele lê o status do elemento form pai mais próximo, não do useActionState
Passar props não serializáveis para Client Components - Funções, classes e Datas não podem cruzar a fronteira servidor/cliente
Usar use() sem Suspense - Promises passadas para use() requerem um boundary Suspense acima
Mutar estado na renderização com Compiler habilitado - O compilador assume as Regras do React; mutações quebram a memoização
Chamar Server Actions durante a renderização - Elas são assíncronas e devem ser chamadas de event handlers ou form actions
Esquecer o directive "use server" - Deve estar no topo do corpo da função ou arquivo, não apenas em um export


## Exemplo de Trabalho

### Exemplo 1: Usuário pergunta "Ajude-me a construir um formulário com React 19"

**Resposta guiada pela skill incluiria:**

```tsx
// actions.ts
"use server";

import { z } from "zod";

const CommentSchema = z.object({
  text: z.string().min(1).max(500),
});

export async function addComment(prevState: any, formData: FormData) {
  const parsed = CommentSchema.safeParse({
    text: formData.get("text"),
  });

  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors };
  }

  await db.comment.create({ data: { text: parsed.data.text } });
  return { error: null };
}

// CommentForm.tsx
"use client";
 
import { useActionState, useOptimistic } from "react";
import { addComment } from "./actions";
import { SubmitButton } from "./SubmitButton";
 
type Comment = { id: string; text: string };
 
export function CommentForm({ comments }: { comments: Comment[] }) {
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newText: string) => [
      ...state,
      { id: crypto.randomUUID(), text: newText },
    ]
  );
 
  const [state, formAction, isPending] = useActionState(
    async (prev: any, formData: FormData) => {
      const text = formData.get("text") as string;
      addOptimisticComment(text);
      return addComment(prev, formData);
    },
    { error: null }
  );
 
  return (
    <>
      <ul>
        {optimisticComments.map((c) => (
          <li key={c.id}>{c.text}</li>
        ))}
      </ul>
      <form action={formAction}>
        <input name="text" required />
        {state.error && <p className="text-red-500">{state.error.text}</p>}
        <SubmitButton />
      </form>
    </>
  );
}

// SubmitButton.tsx
"use client";
 
import { useFormStatus } from "react-dom";
 
export function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Posting..." : "Post Comment"}
    </button>
  );
}

Exemplo 2: Usuário pergunta "Devo usar o React Compiler?"

Resposta guiada pela skill incluiria:

Executar npx eslint-plugin-react-compiler no codebase primeiro
Verificar padrões de mutação em funções de renderização
Recomendar habilitar em uma rota/página primeiro, não no aplicativo inteiro
Mostrar antes/depois da remoção de memoização manual

Análise Profunda

Como a Skill Funciona

Esta skill transforma Claude em um especialista em React 19, fornecendo:

Referência de recursos - Assinaturas completas de API e regras de uso para cada novo recurso do React 19
Regras de decisão - Lógica de quando usar que evita recomendar o recurso errado para um determinado cenário
Padrões de migração - Código lado a lado do React 18 vs 19 para as atualizações mais comuns
Detecção de anti-padrões - Uma lista de erros comuns para que Claude possa alertar proativamente sobre eles

Personalização

Você pode estender esta skill por:

Adicionar convenções específicas do seu projeto (por exemplo, "sempre use nosso wrapper useServerAction")
Restringir recomendações (por exemplo, "não recomende React Compiler até completarmos a auditoria")
Adicionar padrões de migração para seus padrões específicos do React 18 (por exemplo, hooks de formulário personalizados)

Como Instalar

Crie o arquivo .claude/skills/react-19-mastery/SKILL.md na raiz do seu projeto e cole o conteúdo completo da seção Receita acima.

mkdir -p .claude/skills/react-19-mastery
# Em seguida, cole o conteúdo da Receita em .claude/skills/react-19-mastery/SKILL.md

Armadilhas

useActionState foi renomeado de useFormState entre o lançamento RC e o estável. Muitos posts de blog e tutoriais ainda usam o nome antigo. A skill leva isso em consideração.
React Compiler é opt-in e é distribuído como um pacote separado. Ele não é habilitado automaticamente ao atualizar para o React 19.
use() não é useEffect - ele não executa efeitos colaterais. Ele desempacota recursos durante a renderização.
Server Components não podem ser importados em Client Components - a fronteira é unidirecional. Client Components podem receber Server Components como filhos via props.

Alternativas

Abordagem	Quando Usar
React 18 + otimização manual	Projetos legados não prontos para migrar
Sinais Preact	Bundle menor, modelo de reatividade diferente
Solid.js	Reatividade granular sem virtual DOM
Svelte 5	Abordagem focada em compilador com runes

FAQs

Quais são os quatro novos hooks introduzidos no React 19?

useActionState(action, initialState) -- gerencia estado de formulário/action com rastreamento de pendência
useOptimistic(state, updateFn) -- feedback instantâneo na UI durante operações assíncronas
useFormStatus() -- lê o status da submissão do formulário pai de um componente filho
use(resource) -- desempacota promises e context, pode ser chamado dentro de condicionais

Como useActionState difere do antigo useFormState?

// React 18 (de react-dom)
const [state, formAction] = useFormState(action, initial);
 
// React 19 (de react)
const [state, formAction, isPending] = useActionState(action, initial);

Renomeado de useFormState para useActionState
Movido de react-dom para react
Agora retorna isPending como um terceiro valor (não há necessidade de useFormStatus separado apenas para pending)

O que o React Compiler faz e quando você deve habilitá-lo?

Memoiza automaticamente componentes, hooks e expressões
Elimina a maioria do uso manual de useMemo, useCallback e React.memo
Habilite apenas após executar eslint-plugin-react-compiler para verificar violações
Não habilite se a codebase tiver padrões de mutação ou efeitos colaterais na renderização

Como funciona o ref como prop no React 19 e o que ele substitui?

// React 19 -- ref é uma prop regular
function Input({ ref, ...props }: Props & { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />;
}

forwardRef não é mais necessário (ainda funciona, mas está obsoleto)
Componentes de função aceitam ref diretamente como uma prop

Armadilha: O que acontece se você usar useFormStatus fora de um form?

Ele lê o status do elemento <form> pai mais próximo
Se não houver um formulário pai, ele não detectará nenhum estado de submissão
Sempre renderize o componente que usa useFormStatus dentro de um <form>, não no mesmo componente que cria o formulário

Quando você deve usar useOptimistic e o que acontece em caso de falha?

Use quando você pode prever o resultado de uma mutação (likes, bookmarks, toggles)
Ele fornece feedback instantâneo na UI antes que a operação assíncrona seja concluída
Se a operação falhar, o estado otimista reverte automaticamente quando o pai re-renderiza
Sempre combine com tratamento de erros para reverter em caso de falha

Quais são as regras para Server Components no App Router?

Padrão no App Router (nenhum directive "use client" significa Server Component)
Pode acessar diretamente bancos de dados, sistemas de arquivos e APIs exclusivas do servidor
Não pode usar hooks, event handlers, APIs do navegador ou estado
Props passadas para Client Components devem ser serializáveis

Armadilha: Você pode passar props não serializáveis de um Server Component para um Client Component?

Não. Funções, classes e objetos Date não podem cruzar a fronteira servidor/cliente
Apenas dados serializáveis (strings, números, objetos simples, arrays) podem ser passados como props
Converta valores não serializáveis para formatos serializáveis antes de passá-los

Como tipar useActionState com TypeScript para uma action de formulário?

type FormState = { error: string | null; success: boolean };
 
const [state, formAction, isPending] = useActionState(
  async (prev: FormState, formData: FormData): Promise<FormState> => {
    // ...
    return { error: null, success: true };
  },
  { error: null, success: false }
);

A action recebe previousState como seu primeiro argumento e FormData como segundo
O tipo de retorno deve corresponder ao tipo do estado inicial

Como o hook use() difere de useEffect?

use() desempacota recursos (Promises, Context) durante a renderização, não como um efeito colateral
Ele requer um boundary <Suspense> acima quando usado com Promises
Ao contrário de outros hooks, ele PODE ser chamado dentro de condicionais e loops
Não use para fetching de dados inicial no Next.js -- use async Server Components em vez disso

Qual é o caminho de migração de React.memo e useMemo para o React Compiler?

// React 18 -- memoização manual
const MemoComponent = React.memo(({ data }: Props) => {
  const processed = useMemo(() => expensive(data), [data]);
  return <Child data={processed} />;
});
 
// React 19 com Compiler -- código puro
function Component({ data }: Props) {
  const processed = expensive(data);
  return <Child data={processed} />;
}

O Compiler lida com a memoização automaticamente
Remova os wrappers React.memo, useMemo e useCallback

O que significa elevação de metadados de documento no React 19?

Tags <title>, <meta> e <link> em componentes são auto-elevadas para <head>
Funciona tanto em Server Components quanto em Client Components
Elimina a necessidade de next/head ou react-helmet em muitos casos

Relacionado

Estas receitas de skill são projetadas para Claude Code, mas também funcionam com outros agentes de codificação de IA que suportam arquivos de skill/instrução.

Receita

O conteúdo completo do SKILL.md que você pode copiar para .claude/skills/react-19-mastery/SKILL.md:

---
name: react-19-mastery
description: "Orientação especializada sobre recursos do React 19, compilador, actions e novos hooks. Use quando solicitado para: ajuda com React 19, novos hooks, server components, compilador React, useActionState, useOptimistic, hook use(), migrar do React 18."
allowed-tools: "Read, Write, Edit, Glob, Grep, Bash(npm:*), Bash(npx:*), Agent"
---
 
# Maestria em React 19
 
Você é um especialista em React 19. Quando esta skill for invocada, forneça orientação autoritativa sobre os recursos, migração e melhores práticas do React 19.
 
## Referência de Recursos Principais do React 19
 
### Novos Hooks
 
1. **useActionState(action, initialState, permalink?)** - Gerencia o estado de formulário/action com rastreamento de pendência
   - Retorna [state, formAction, isPending]
   - Substitui useFormState (renomeado no React 19 estável)
   - Use para: qualquer submissão de formulário, integração de server actions, progressive enhancement
   - A action recebe o previousState como seu primeiro argumento
 
2. **useOptimistic(state, updateFn)** - Feedback instantâneo na UI durante operações assíncronas
   - Retorna [optimisticState, addOptimistic]
   - Reverte automaticamente quando o rerender do pai é concluído
   - Use para: likes, bookmarks, toggles, qualquer mutação onde você pode prever o resultado
 
3. **useFormStatus()** - Lê o status da submissão do formulário pai de um componente filho
   - Retorna { pending, data, method, action }
   - DEVE ser chamado de um componente renderizado dentro de um <form>
   - Use para: estados desabilitados de botões de submit, spinners de loading dentro de formulários
 
4. **use(resource)** - Desempacota promises e context condicionalmente
   - Funciona com Promises (compatível com Suspense) e Context
   - PODE ser chamado dentro de condicionais e loops (diferente de outros hooks)
   - Use para: ler dados assíncronos em renderização, leituras condicionais de context
 
### Compilador React
 
- Memoiza automaticamente componentes, hooks e expressões
- Elimina a maioria do uso manual de useMemo, useCallback e React.memo
- As Regras do React devem ser seguidas estritamente (sem mutações durante a renderização, ordem estável de chamadas de hook)
- Instalar: babel-plugin-react-compiler ou o plugin Vite/Next.js
- Validar com eslint-plugin-react-compiler antes de habilitar
 
### Server Components (RSC)
 
- Padrão no App Router (nenhum directive "use client" = Server Component)
- Pode acessar diretamente bancos de dados, sistemas de arquivos e APIs exclusivas do servidor
- Não pode usar hooks, event handlers, APIs do navegador ou estado
- Props passadas para Client Components devem ser serializáveis
 
### Server Actions
 
- Funções assíncronas marcadas com "use server" no topo do corpo da função ou arquivo
- Podem ser passadas para formulários como action={serverAction}
- Podem ser chamadas de Client Components como funções assíncronas regulares
- Sempre valide inputs no lado do servidor, mesmo que a validação no cliente exista
 
### ref como prop
 
- Componentes de função agora aceitam ref como uma prop regular
- forwardRef não é mais necessário (ainda funciona, mas está obsoleto)
- Padrão: function Input({ ref, ...props }) { return <input ref={ref} {...props} /> }
 
### Elevação de Metadados de Documento
 
- Tags <title>, <meta> e <link> em componentes são auto-elevadas para <head>
- Funciona tanto em Server Components quanto em Client Components
- Elimina a necessidade de next/head ou react-helmet em muitos casos
 
## Regras de Decisão
 
Quando um usuário perguntar sobre React 19, siga estas regras:
 
### Quando recomendar useActionState
- O usuário está construindo um formulário que envia dados
- O usuário precisa rastrear o estado pendente durante a submissão
- O usuário quer progressive enhancement (funciona sem JS)
- O usuário está migrando de useFormState
 
### Quando recomendar useOptimistic
- O usuário quer feedback instantâneo em uma mutação
- O resultado otimista é previsível a partir da entrada
- O usuário está construindo recursos de like/bookmark/toggle
- SEMPRE combine com tratamento de erros para reverter em caso de falha
 
### Quando recomendar use()
- O usuário precisa ler uma promise em um componente (envolva o pai com Suspense)
- O usuário precisa de acesso condicional a context
- NÃO recomende para fetching de dados inicial no Next.js (use async Server Components em vez disso)
 
### Quando recomendar React Compiler
- O usuário está no React 19 e tem uma codebase limpa seguindo as Regras do React
- O usuário tem problemas de performance devido à falta de memoização
- SEMPRE recomende executar eslint-plugin-react-compiler primeiro
- NÃO recomende se a codebase tiver padrões de mutação ou efeitos colaterais na renderização
 
## Padrões de Migração do React 18
 
### useFormState para useActionState
```tsx
// React 18 (react-dom)
import \{ useFormState \} from "react-dom";
const [state, formAction] = useFormState(action, initial);
 
// React 19 (react)
import \{ useActionState \} from "react";
const [state, formAction, isPending] = useActionState(action, initial);
// Nota: isPending agora está embutido, não há necessidade de useFormStatus apenas para pending

forwardRef para ref prop

// React 18
const Input = forwardRef<HTMLInputElement, Props>((props, ref) => (
  <input ref=\{ref\} \{...props\} />
));
 
// React 19
function Input(\{ ref, ...props \}: Props & \{ ref?: React.Ref<HTMLInputElement> \}) \{
  return <input ref=\{ref\} \{...props\} />;
\}

memo manual para React Compiler

// React 18 - memoização manual
const MemoComponent = React.memo((\{ data \}: Props) => \{
  const processed = useMemo(() => expensive(data), [data]);
  const handler = useCallback(() => doThing(data), [data]);
  return <Child data=\{processed\} onClick=\{handler\} />;
\});
 
// React 19 com Compiler - apenas escreva código puro
function Component(\{ data \}: Props) \{
  const processed = expensive(data);
  const handler = () => doThing(data);
  return <Child data=\{processed\} onClick=\{handler\} />;
\}

Erros Comuns

Usar useFormStatus fora de um form - Ele lê o status do elemento form pai mais próximo, não do useActionState
Passar props não serializáveis para Client Components - Funções, classes e Datas não podem cruzar a fronteira servidor/cliente
Usar use() sem Suspense - Promises passadas para use() requerem um boundary Suspense acima
Mutar estado na renderização com Compiler habilitado - O compilador assume as Regras do React; mutações quebram a memoização
Chamar Server Actions durante a renderização - Elas são assíncronas e devem ser chamadas de event handlers ou form actions
Esquecer o directive "use server" - Deve estar no topo do corpo da função ou arquivo, não apenas em um export


## Exemplo de Trabalho

### Exemplo 1: Usuário pergunta "Ajude-me a construir um formulário com React 19"

**Resposta guiada pela skill incluiria:**

```tsx
// actions.ts
"use server";

import { z } from "zod";

const CommentSchema = z.object({
  text: z.string().min(1).max(500),
});

export async function addComment(prevState: any, formData: FormData) {
  const parsed = CommentSchema.safeParse({
    text: formData.get("text"),
  });

  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors };
  }

  await db.comment.create({ data: { text: parsed.data.text } });
  return { error: null };
}

// CommentForm.tsx
"use client";
 
import { useActionState, useOptimistic } from "react";
import { addComment } from "./actions";
import { SubmitButton } from "./SubmitButton";
 
type Comment = { id: string; text: string };
 
export function CommentForm({ comments }: { comments: Comment[] }) {
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newText: string) => [
      ...state,
      { id: crypto.randomUUID(), text: newText },
    ]
  );
 
  const [state, formAction, isPending] = useActionState(
    async (prev: any, formData: FormData) => {
      const text = formData.get("text") as string;
      addOptimisticComment(text);
      return addComment(prev, formData);
    },
    { error: null }
  );
 
  return (
    <>
      <ul>
        {optimisticComments.map((c) => (
          <li key={c.id}>{c.text}</li>
        ))}
      </ul>
      <form action={formAction}>
        <input name="text" required />
        {state.error && <p className="text-red-500">{state.error.text}</p>}
        <SubmitButton />
      </form>
    </>
  );
}

// SubmitButton.tsx
"use client";
 
import { useFormStatus } from "react-dom";
 
export function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Posting..." : "Post Comment"}
    </button>
  );
}

Exemplo 2: Usuário pergunta "Devo usar o React Compiler?"

Resposta guiada pela skill incluiria:

Executar npx eslint-plugin-react-compiler no codebase primeiro
Verificar padrões de mutação em funções de renderização
Recomendar habilitar em uma rota/página primeiro, não no aplicativo inteiro
Mostrar antes/depois da remoção de memoização manual

Análise Profunda

Como a Skill Funciona

Esta skill transforma Claude em um especialista em React 19, fornecendo:

Referência de recursos - Assinaturas completas de API e regras de uso para cada novo recurso do React 19
Regras de decisão - Lógica de quando usar que evita recomendar o recurso errado para um determinado cenário
Padrões de migração - Código lado a lado do React 18 vs 19 para as atualizações mais comuns
Detecção de anti-padrões - Uma lista de erros comuns para que Claude possa alertar proativamente sobre eles

Personalização

Você pode estender esta skill por:

Adicionar convenções específicas do seu projeto (por exemplo, "sempre use nosso wrapper useServerAction")
Restringir recomendações (por exemplo, "não recomende React Compiler até completarmos a auditoria")
Adicionar padrões de migração para seus padrões específicos do React 18 (por exemplo, hooks de formulário personalizados)

Como Instalar

Crie o arquivo .claude/skills/react-19-mastery/SKILL.md na raiz do seu projeto e cole o conteúdo completo da seção Receita acima.

mkdir -p .claude/skills/react-19-mastery
# Em seguida, cole o conteúdo da Receita em .claude/skills/react-19-mastery/SKILL.md

Armadilhas

useActionState foi renomeado de useFormState entre o lançamento RC e o estável. Muitos posts de blog e tutoriais ainda usam o nome antigo. A skill leva isso em consideração.
React Compiler é opt-in e é distribuído como um pacote separado. Ele não é habilitado automaticamente ao atualizar para o React 19.
use() não é useEffect - ele não executa efeitos colaterais. Ele desempacota recursos durante a renderização.
Server Components não podem ser importados em Client Components - a fronteira é unidirecional. Client Components podem receber Server Components como filhos via props.

Alternativas

Abordagem	Quando Usar
React 18 + otimização manual	Projetos legados não prontos para migrar
Sinais Preact	Bundle menor, modelo de reatividade diferente
Solid.js	Reatividade granular sem virtual DOM
Svelte 5	Abordagem focada em compilador com runes

FAQs

Quais são os quatro novos hooks introduzidos no React 19?

useActionState(action, initialState) -- gerencia estado de formulário/action com rastreamento de pendência
useOptimistic(state, updateFn) -- feedback instantâneo na UI durante operações assíncronas
useFormStatus() -- lê o status da submissão do formulário pai de um componente filho
use(resource) -- desempacota promises e context, pode ser chamado dentro de condicionais

Como useActionState difere do antigo useFormState?

// React 18 (de react-dom)
const [state, formAction] = useFormState(action, initial);
 
// React 19 (de react)
const [state, formAction, isPending] = useActionState(action, initial);

Renomeado de useFormState para useActionState
Movido de react-dom para react
Agora retorna isPending como um terceiro valor (não há necessidade de useFormStatus separado apenas para pending)

O que o React Compiler faz e quando você deve habilitá-lo?

Memoiza automaticamente componentes, hooks e expressões
Elimina a maioria do uso manual de useMemo, useCallback e React.memo
Habilite apenas após executar eslint-plugin-react-compiler para verificar violações
Não habilite se a codebase tiver padrões de mutação ou efeitos colaterais na renderização

Como funciona o ref como prop no React 19 e o que ele substitui?

// React 19 -- ref é uma prop regular
function Input({ ref, ...props }: Props & { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />;
}

forwardRef não é mais necessário (ainda funciona, mas está obsoleto)
Componentes de função aceitam ref diretamente como uma prop

Armadilha: O que acontece se você usar useFormStatus fora de um form?

Ele lê o status do elemento <form> pai mais próximo
Se não houver um formulário pai, ele não detectará nenhum estado de submissão
Sempre renderize o componente que usa useFormStatus dentro de um <form>, não no mesmo componente que cria o formulário

Quando você deve usar useOptimistic e o que acontece em caso de falha?

Use quando você pode prever o resultado de uma mutação (likes, bookmarks, toggles)
Ele fornece feedback instantâneo na UI antes que a operação assíncrona seja concluída
Se a operação falhar, o estado otimista reverte automaticamente quando o pai re-renderiza
Sempre combine com tratamento de erros para reverter em caso de falha

Quais são as regras para Server Components no App Router?

Padrão no App Router (nenhum directive "use client" significa Server Component)
Pode acessar diretamente bancos de dados, sistemas de arquivos e APIs exclusivas do servidor
Não pode usar hooks, event handlers, APIs do navegador ou estado
Props passadas para Client Components devem ser serializáveis

Armadilha: Você pode passar props não serializáveis de um Server Component para um Client Component?

Não. Funções, classes e objetos Date não podem cruzar a fronteira servidor/cliente
Apenas dados serializáveis (strings, números, objetos simples, arrays) podem ser passados como props
Converta valores não serializáveis para formatos serializáveis antes de passá-los

Como tipar useActionState com TypeScript para uma action de formulário?

type FormState = { error: string | null; success: boolean };
 
const [state, formAction, isPending] = useActionState(
  async (prev: FormState, formData: FormData): Promise<FormState> => {
    // ...
    return { error: null, success: true };
  },
  { error: null, success: false }
);

A action recebe previousState como seu primeiro argumento e FormData como segundo
O tipo de retorno deve corresponder ao tipo do estado inicial

Como o hook use() difere de useEffect?

use() desempacota recursos (Promises, Context) durante a renderização, não como um efeito colateral
Ele requer um boundary <Suspense> acima quando usado com Promises
Ao contrário de outros hooks, ele PODE ser chamado dentro de condicionais e loops
Não use para fetching de dados inicial no Next.js -- use async Server Components em vez disso

Qual é o caminho de migração de React.memo e useMemo para o React Compiler?

// React 18 -- memoização manual
const MemoComponent = React.memo(({ data }: Props) => {
  const processed = useMemo(() => expensive(data), [data]);
  return <Child data={processed} />;
});
 
// React 19 com Compiler -- código puro
function Component({ data }: Props) {
  const processed = expensive(data);
  return <Child data={processed} />;
}

O Compiler lida com a memoização automaticamente
Remova os wrappers React.memo, useMemo e useCallback

O que significa elevação de metadados de documento no React 19?

Tags <title>, <meta> e <link> em componentes são auto-elevadas para <head>
Funciona tanto em Server Components quanto em Client Components
Elimina a necessidade de next/head ou react-helmet em muitos casos

Skill de Maestria em React 19 - Uma receita de skill Claude Code para orientação especializada em React 19

Buscar na documentação

Skill de Maestria em React 19 - Uma receita de skill Claude Code para orientação especializada em React 19