Exercícios de Fixação – Aula 10 🏗️

Exercício 01: useRef e Foco Automático

Crie um componente que tenha um formulário de login (E-mail e Senha). 1. Ao carregar a página, o campo de E-mail deve receber foco automaticamente usando useRef. 2. Adicione um botão "Limpar e Focar" que limpa os campos e volta o cursor para o e-mail.

Exercício 02: useMemo para Filtros

Crie uma lista de nomes (pelo menos 20 nomes). 1. Adicione um input de busca. 2. Use o useMemo para filtrar a lista conforme o usuário digita. 3. Coloque um console.log dentro do filtro para provar que ele não roda sem necessidade.

🟡 Nível: Intermediário

Exercício 03: useCallback e Componente Memoizado

1. Crie um componente filho que recebe uma função via prop.
2. Memoize o filho com React.memo.
3. No pai, use o useCallback para passar a função para o filho.
4. Verifique se o filho para de renderizar quando outros estados do pai mudam.

Exercício 04: Contador Silencioso com useRef

Crie um botão que incrementa uma variável salva dentro de um useRef. 1. Exiba o valor atual no console. 2. Verifique que o valor muda, mas o número na tela (se você usar um h1 estático) não é atualizado. 3. Adicione um botão de "Forçar Render" (usando um useState bobo) e veja o valor do ref aparecendo.

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Crie um componente filho que recebe uma função via prop.
function solucaoExercicio() {
    console.log("Executando validação de: Hooks Avançados: useMemo, useCallback e useRef ️");
    return true;
}

solucaoExercicio();

// Solução de referência para: No pai, use o `useCallback` para passar a função para o filho.
function solucaoExercicio() {
    console.log("Executando validação de: Hooks Avançados: useMemo, useCallback e useRef ️");
    return true;
}

solucaoExercicio();