🚀 Capítulo 08: Custom Hooks - Sabedoria Jedi

🎯 Objetivo da Aula

Ao final desta aula, você saberá como criar os seus próprios Hooks personalizados (Custom Hooks) para isolar a lógica do seu componente e reaproveitá-la em qualquer lugar do seu projeto.

---

🏢 O Cenário Prático (Seu Desafio)

Várias telas da sua nave precisam de um cronômetro para contar o tempo de missão. Em vez de escrever o mesmo código de relógio em todas as telas, seu desafio é criar um Hook de Cronômetro e apenas chamá-lo onde precisar!

---

🧠 Fundamentos: A Teoria Traduzida

Até agora usamos os hooks que já vêm no React (useState, useEffect). Mas e se a gente pudesse criar o nosso próprio hook? Nós podemos!

O que é um Custom Hook?

É uma função JavaScript comum que:

1. Começa com a palavra use (ex: useCronometro, useFormulario). Isso avisa o React que é um hook.
2. Pode usar outros hooks dentro dele (como useState e useEffect).
3. Retorna dados ou funções para o componente usar.

---

📖 Exemplo Guiado: Criando o Hook de Contador

Vamos criar um hook que gerencia a contagem de tempo.

🛠️ Passo a Passo (Criando o Hook)

1. Crie um arquivo chamado useContador.js na pasta src.
2. Adicione o código:

import { useState } from 'react';
 
// Nosso hook personalizado
export function useContador(valorInicial = 0) {
  const [contador, setContador] = useState(valorInicial);
 
  const incrementar = () => setContador(contador + 1);
  const decrementar = () => setContador(contador - 1);
 
  // Retornamos o valor e as funções para o componente usar
  return { contador, incrementar, decrementar };
}

🛠️ Passo a Passo (Usando no Componente)

Abra o App.jsx e use o seu novo hook:

import { useContador } from './useContador';
 
function App() {
  // Chamamos o nosso hook como se fosse um hook do React!
  const { contador, incrementar } = useContador(10); // Começa em 10
 
  return (
    <div>
      <h1>⏱️ Tempo de Missão</h1>
      <p>Segundos: **{contador}**</p>
      <button onClick={incrementar}>Adicionar Segundo</button>
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve os arquivos e veja o navegador.
2. O contador começará em 10 e o botão funcionará perfeitamente! A lógica está toda isolada no arquivo do hook.

---

🛠️ Prática Obrigatória 1

No arquivo useContador.js, adicione uma função chamada resetar que define o contador de volta para o valor inicial. Lembre-se de retornar essa função no final do arquivo.

---

🛠️ Prática Obrigatória 2

Use a função resetar no seu App.jsx criando um botão “Resetar Tempo”.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No useContador.js:

const resetar = () => setContador(valorInicial);
 
return { contador, incrementar, decrementar, resetar };

Prática 2:

No App.jsx:

const { contador, incrementar, resetar } = useContador(10);
// ...
<button onClick={resetar}>Resetar Tempo</button>

---

← Capitulo Anterior | Proximo Capitulo →