react18-lifecycle-patterns
Oferece padrões de migração para métodos de ciclo de vida inseguros em componentes de classe React 18. Ajuda a escolher entre métodos alternativos.
O que ela faz
Ajuda a atualizar métodos antigos de 'ciclo de vida' em códigos React para versões mais novas. Ele mostra como mover partes do código para os lugares corretos para que funcionem bem com as versões recentes do React.
Quando usar
- ✓Quando você tem um código antigo em React que usa métodos de ciclo de vida que não são mais recomendados.
- ✓Ao decidir se deve usar 'getDerivedStateFromProps' ou 'componentDidUpdate'.
- ✓Quando você precisa adicionar 'getSnapshotBeforeUpdate' para lidar com atualizações.
Exemplo do que pedir para a IA
“Como eu migro o método 'componentWillMount' que define o estado inicial no meu componente React?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Este guia compara o que um método antigo faz com as novas formas de fazer a mesma coisa no React 18. Ele te direciona para exemplos específicos dependendo da função do método antigo.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add github/awesome-copilot --skill react18-lifecycle-patternsOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react18-lifecycle-patterns/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Padrões de Ciclo de Vida do React 18
Referência para migrar os três métodos de ciclo de vida de componentes de classe inseguros para padrões compatíveis com o React 18.3.1.
Guia Rápido de Decisão
Antes de migrar qualquer método de ciclo de vida, identifique a categoria semântica do que o método faz. Categoria errada = migração errada. A tabela abaixo direciona você para o arquivo de referência correto.
componentWillMount - o que faz?
| O que faz | Migração correta | Referência |
|---|---|---|
Define o estado inicial (this.setState(...)) |
Mover para constructor |
→ componentWillMount.md |
| Executa um efeito colateral (fetch, subscription, DOM) | Mover para componentDidMount |
→ componentWillMount.md |
| Deriva o estado inicial de props | Mover para constructor com props |
→ componentWillMount.md |
componentWillReceiveProps - o que faz?
| O que faz | Migração correta | Referência |
|---|---|---|
| Efeito colateral assíncrono acionado por mudança de prop (fetch, cancel) | componentDidUpdate |
→ componentWillReceiveProps.md |
| Derivação pura de estado de novas props (sem efeitos colaterais) | getDerivedStateFromProps |
→ componentWillReceiveProps.md |
componentWillUpdate - o que faz?
| O que faz | Migração correta | Referência |
|---|---|---|
| Lê o DOM antes da atualização (scroll, size, position) | getSnapshotBeforeUpdate |
→ componentWillUpdate.md |
| Cancela requisições / executa efeitos antes da atualização | componentDidUpdate com comparação anterior |
→ componentWillUpdate.md |
A Regra do Prefixo UNSAFE_
Nunca use UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps ou UNSAFE_componentWillUpdate como uma correção permanente.
O prefixo suprime o aviso do React 18.3.1, mas NÃO:
- Corrige problemas de segurança do modo concorrente
- Prepara o codebase para o React 19 (onde eles serão removidos, com ou sem o prefixo)
- Corrige o problema semântico subjacente que a migração visa resolver
O prefixo UNSAFE_ só é apropriado como uma medida temporária enquanto se agenda o sprint de migração real. Marque quaisquer adições de prefixo UNSAFE_ com:
// TODO: React 19 will remove this. Migrate before React 19 upgrade.
// UNSAFE_ prefix added temporarily - replace with componentDidMount / getDerivedStateFromProps / etc.
Arquivos de Referência
Leia o arquivo de referência completo para o método de ciclo de vida que você está migrando:
references/componentWillMount.md- 3 casos com código completo antes/depoisreferences/componentWillReceiveProps.md- Avisos sobre armadilhas de getDerivedStateFromProps, exemplos completosreferences/componentWillUpdate.md- Emparelhamento de getSnapshotBeforeUpdate + componentDidUpdate
Leia o arquivo relevante antes de escrever qualquer código de migração.
Perguntas frequentes
O que são 'métodos de ciclo de vida'?
São funções especiais em componentes React que executam código em momentos específicos, como quando o componente é criado, atualizado ou removido.
Por que não posso usar os métodos antigos como 'UNSAFE_componentWillMount'?
Usar o prefixo 'UNSAFE_' apenas esconde um aviso, mas não resolve os problemas de compatibilidade com as novas versões do React. É uma solução temporária, não definitiva.
Onde encontro os exemplos de código para a migração?
Os exemplos detalhados estão em arquivos de referência separados, como 'componentWillMount.md', 'componentWillReceiveProps.md' e 'componentWillUpdate.md', que o guia indica.
Detalhes
Descrição original do autor
Provides exact before/after migration patterns for the three unsafe class component lifecycle methods - componentWillMount, componentWillReceiveProps, and componentWillUpdate - targeting React 18.3.1. Use this skill whenever a class component needs its lifecycle methods migrated, when deciding between getDerivedStateFromProps vs componentDidUpdate, when adding getSnapshotBeforeUpdate, or when fixi
repo: github/awesome-copilot
Popularidade
- Estrelas no GitHub
- 40 mil
- Posição no ranking
- #5330
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
acquire-codebase-knowledge
Ajuda seu agente a entender e documentar um projeto de código existente. É útil para novas pessoas entrarem no projeto ou para ter uma visão geral da arquitetura.
github/awesome-copilot
acreadiness-assess
Faz seu agente avaliar a prontidão de um projeto para IA e gerar um relatório. É útil para entender o quão bem um projeto está preparado para usar ferramentas de IA.
github/awesome-copilot
acreadiness-generate-instructions
Ajuda seu agente a criar instruções para ferramentas de IA baseadas em uma avaliação. É útil para melhorar a forma como a IA interage com o código e fecha lacunas identificadas.
github/awesome-copilot
acreadiness-policy
Faz seu agente ajudar a definir ou aplicar políticas para avaliação de projetos de IA. É útil para padronizar a forma como os projetos são avaliados e garantir conformidade.
github/awesome-copilot
Skills parecidas
angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC