O que construir o Pagelyze me ensinou sobre React

Construir o Pagelyze mudou minha visão sobre o React. Parei de olhar para a teoria e comecei a olhar para a arquitetura de produto.

O Pagelyze é uma ferramenta de auditoria de sites. Não é um pequeno aplicativo de prática. Ele lida com relatórios de auditoria, lógica de pontuação e dashboards. Por causa disso, tive que responder a uma pergunta:

Este código permanecerá limpo conforme o produto cresce?

Hooks como useState ou useEffect são importantes. Mas eles não são a história toda. Você pode usar sintaxe moderna e ainda ter uma bagunça para manter. O problema geralmente é a responsabilidade.

Em uma configuração ruim, um único arquivo lida com tudo, desde o carregamento de dados até a exibição de resultados. Isso falha conforme você escala.

Uma maneira melhor é dividir os componentes por propósito:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

Cada peça tem um único trabalho. Você pode alterar o design de um card sem quebrar sua lógica de dados.

Pare de perguntar se você deve usar Redux ou Context. Pergunte quem precisa do estado.

  • Estado de UI local: abas e modais
  • Estado de formulário: URLs e validação
  • Estado de servidor: relatórios e scans
  • Estado global: perfil de usuário e permissões

Custom hooks devem representar comportamento. Eles não devem apenas mover código bagunçado para um arquivo diferente. Um bom hook busca dados para que o componente da página apenas coordene a tela.

Estruture suas pastas por funcionalidade:

  • features/audit-report/
  • features/lead-rescue/
  • features/dashboard/

Roteamento é mais do que apenas URLs. É a jornada do usuário. Um usuário vai de uma landing page para uma auditoria gratuita, depois para um relatório e, finalmente, para uma solicitação de serviço. Um bom roteamento o guia para o próximo passo.

Construa com clareza. Encontre o gargalo. Corrija essa parte específica.

As melhores práticas de React são sobre decisões. Você decide o que um componente possui. Você decide onde o estado reside. Você decide se uma rota ajuda o usuário.

O Pagelyze é o meu teste. Não estou testando se consigo construir uma tela. Estou testando se consigo manter um produto limpo conforme ele cresce.

Fonte: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb