No Use Effect skill

O que ela faz

A skill impõe uma regra no código React: nunca chamar o useEffect direto. Quando o Claude escreve um componente, refatora código antigo ou revisa um PR, ele identifica o que cada efeito está fazendo e troca pelo substituto certo. Vale também quando o próprio agente quer pôr um useEffect só por garantia.

São cinco trocas: valor calculado na hora em vez de estado copiado, biblioteca de busca de dados (como o useQuery) em vez de fetch dentro do efeito, a ação dentro do clique em vez de bandeira com efeito, o useMountEffect pra conectar algo na montagem e a prop key pra zerar o componente quando o ID muda.

Pra cada regra a skill traz o exemplo errado, o certo e o sinal que entrega o caso. No fim, o Claude confere com lint, checagem de tipos e testes, e organiza o componente numa ordem fixa: hooks, estado, valores calculados, funções de evento, retornos antecipados e a tela.

Nas palavras de quem fez

Quando usar

• Escrever componentes novos num app React
• Limpar um componente antigo cheio de useEffect
• Revisar um PR que trouxe useEffect novo
• Corrigir tela que renderiza duas vezes por estado sincronizado
• Trocar a busca de dados feita no useEffect por uma biblioteca de consulta

Depois de instalar, é só pedir assim

• Revisa esse componente e tira todos os useEffect seguindo a skill no-use-effect
• Escreve a página de produto em React sem useEffect, buscando os dados com useQuery
• Esse botão de curtir usa um estado e um useEffect pra mandar o like; refaz do jeito certo

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas