Frontend Web - Hooks Customizados

Este documento descreve o modelo atual de hooks no frontend modular.

Estrutura atual

O padrão principal é hook por submódulo:

• src/modules/<dominio>/<submodulo>/hooks/use<Feature>Page.ts

Exemplos ativos:

• src/modules/client/learn-course/hooks/useClientLearnCoursePage.ts
• src/modules/cycles/details/hooks/useCyclesDetailsPage.ts
• src/modules/shared/appointments/hooks/useAppointmentsPage.ts
• src/modules/admin/billings/day-based-rules/hooks/useDayBasedRulesPage.ts

Também existem hooks compartilhados globais em src/hooks/* para casos transversais.

Responsabilidade dos hooks

1. Orquestrar estado de tela.
2. Executar useQuery/useMutation.
3. Chamar serviços do próprio submódulo.
4. Expor contrato de props consumido por view.tsx.

Regras arquiteturais

• Hook pode importar service.
• Hook não pode importar view.tsx.
• Hook não deve depender de componentes visuais.

Exemplo de fluxo

• page.tsx chama useFeaturePage().
• Hook retorna dados e callbacks.
• view.tsx recebe props e renderiza.

Critérios de qualidade para novos hooks

1. Nome explícito por feature.
2. Retorno tipado em types.ts local.
3. Separação entre estado derivado e efeitos colaterais.
4. Nenhuma importação circular entre hooks, services, view.