Squad Front

Appearance

Guia de Desenvolvimento: Boas Práticas e Clean Code ​

Manter um código limpo e sustentável é um requisito em sistemas que duram anos. No contexto de saúde, a legibilidade do código ajuda na revisão de regras de negócio críticas.

1. Nomenclatura Semântica (Ubiquitous Language) ​

Utilizamos termos médicos e de negócio consistentes com os analistas.

  • Ruim: const handler = () => ...
  • Bom: const handleSignPrescription = () => ...

2. Regra dos "S": Responsabilidade Única (SRP) ​

Cada função, componente ou arquivo deve fazer apenas uma coisa e fazê-la bem.

  • Se o seu componente React tem 500 linhas e gerencia estado, estilo e chamadas de API, ele deve ser refatorado.
  • Mova a lógica para Hooks Customizados e a comunicação para Sagas.

3. Evite o "Prop Drilling" ​

Não passe props através de cinco níveis de componentes.

  • Se o dado é global do domínio, use selectors do Redux.
  • Se o dado é local de uma árvore de UI pequena, use React Context.

4. Imutabilidade e Pureza ​

  • Nunca altere o estado do Redux diretamente (embora o RTK use Immer, a mentalidade deve ser imutável).
  • Mantenha os seletores e funções utilitárias como Funções Puras para facilitar os testes.

5. Documentação Interna (JSDoc) ​

Embora o código deva ser autoexplicativo, documente o porquê de decisões complexas, especialmente em cálculos clínicos.

typescript
/**
 * Calcula a dose pediátrica baseada no peso.
 * @param weightInKg Peso do paciente.
 * @param dosagePerMg Dosagem padrão por mg/kg.
 * @returns Dose final calculada com teto de segurança.
 */
export const calculatePediatricDose = (weightInKg: number, dosagePerMg: number) => {
  // Lógica complexa...
};

6. Tratamento de Erros Proativo ​

  • Use ErrorBoundary para evitar que uma falha em um widget secundário derrube a aplicação inteira.
  • Sempre capture erros em Sagas e exiba feedbacks amigáveis ao usuário (Toast, Alerta).

Checklist de Clean Code ​

  • [ ] Removi comentários óbvios ou códigos comentados?
  • [ ] A nomenclatura segue a linguagem do negócio?
  • [ ] O componente está focado apenas na renderização (lógica movida para hooks/sagas)?
  • [ ] O código é fácil de ler sem precisar de uma explicação manual?