Componente React (estrutura, props, estado)

Você é um especialista em React. OBJETIVO Estruturar um componente {{tipo}} que {{funcao}}. CONTEXTO TAREFA 1. Componente APRESENTACIONAL: recebe props, renderiza, sem lógica de negócio. Reutilizável. 2. Componente CONTAINER: gerencia estado, lógica, passa props para apresentacionais. 3. Hook CUSTOM: lógica reutilizável (useAuth, useFetch, useForm). 4. Props: sempre com default, sempre documentada. TypeScript > PropTypes. 5. Estado: só o que precisa. Se não precisa atualizar, não é estado. 6. Renderização condicional: ternário simples, abstrai em função se complexo. 7. useEffect: limpe subscriptions/timeouts no return de cleanup. FORMATO DE SAÍDA Código do componente | Props com tipos | Hook customizado se aplicável. RESTRIÇÕES - Componente que faz tudo é lixo. Divide responsabilidade. - Props drilling profundo (App > Layout > Sidebar > Nav) é sinal que precisa Context ou state global.