React Hooks

Hooks são funções que permitem "conectar" o estado e os recursos de ciclo de vida do React a partir de componentes funcionais.

---

Hooks Básicos

1. useState

Gerencia estado local em um componente.

const [count, setCount] = useState(0);

2. useEffect

Lida com efeitos colaterais (chamadas de API, assinaturas, timers). Ver Guia Detalhado do useEffect

3. useContext

Acessa dados de um contexto sem precisar passar props manualmente em todos os níveis.

---

Hooks de Performance

1. useMemo

Memoriza um valor calculado para evitar recalculá-lo em cada renderização. Ver Guia Detalhado do useMemo

2. useCallback

Memoriza uma definição de função para evitar que seja recriada em cada renderização. Ver Guia Detalhado do useCallback

---

Custom Hooks (O Coração da nossa Arquitetura)

No nosso projeto, utilizamos Custom Hooks para separar a lógica da interface.

Por que criar Custom Hooks?

1. Reutilização: Lógica que se repete em vários componentes.
2. Organização: Deixa o componente visual limpo e focado em renderizar a UI.
3. Testabilidade: Facilita o teste da lógica de forma isolada.

Padrão de Tela (*-screen.hooks.ts)

Toda tela (.screen.tsx) deve ter seu próprio hook de interface.

// appointment-screen.hooks.ts
export function useAppointmentScreen() {
    const [filter, setFilter] = useState('all');
    const { data, isLoading } = useGetAppointments(filter); // Hook da camada Feature

    function handleFilterChange(newFilter: string) {
        setFilter(newFilter);
    }

    return {
        data,
        isLoading,
        handleFilterChange
    };
}

---

Regras dos Hooks

1. Apenas no Topo: Não chame Hooks dentro de loops, condições ou funções aninhadas.
2. Apenas em Funções React: Chame Hooks apenas em componentes funcionais ou em outros Custom Hooks.
3. Prefixe com use: Todo hook deve começar com a palavra use (ex: useUser, useForm).

---

Quando criar um Custom Hook?

• Sempre que houver lógica de estado complexa: Se o seu componente tem muitos useState ou useEffect, extraia-os.
• Integração com a Camada de Aplicação: Para abstrair chamadas ao TanStack Query ou Actions globais.
• Lógica de UI Reutilizável: Ex: useModal, useFormValidation, useWindowDimensions.