Princípios de React Hooks
Pare de usar useEffect para tudo. Muitos desenvolvedores usam este hook de forma incorreta. Isso cria bugs e torna o código difícil de ler.
Limite o uso do useEffect.
Tente usar apenas um useEffect por página. Usar muitos hooks para o mesmo estado causa confusão. Você perde o controle de qual hook atualiza qual estado.
Pare de usar useEffect para eventos de usuário.
Não use useEffect para cliques ou toques. Use manipuladores de eventos em vez disso.
- Ruim: Usar useEffect para atualizar o estado após um clique.
- Bom: Use uma função como
onClickBarpara atualizar o estado.
Tipos de eventos que você deve conhecer:
- Navegação de página e renderizações iniciais.
- Mudanças na conexão de rede.
- Atualizações de WebSocket ou do servidor em tempo real.
Ações do usuário, como cliques, não pertencem ao useEffect. Use manipuladores de eventos diretos para essas ações.
Divida os componentes por props.
Se você usa uma prop booleana para alterar a lógica, divida seu componente. Não construa um único componente que lide tanto com a criação quanto com a atualização de dados.
Um único componente com muitos comandos "if" cresce demais. Isso torna o aplicativo difícil de manter.
- Ruim: Um componente com uma prop "isAdd" que altera os campos do formulário.
- Bom: Crie um "RegisterComponent" e um "UpdateComponent".
Componentes pequenos são mais fáceis de testar. Eles rodam mais rápido. Eles permanecem limpos.
Fonte: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31