🚀 Capítulo 15: Memoização - Foco da Força

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o conceito de Memoização no React e saberá como usar o Hook useMemo para evitar que o React execute cálculos pesados toda vez que a tela for atualizada por outro motivo.

---

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

O radar da sua nave está processando uma lista gigante de naves inimigas para calcular qual delas está mais perto. Fazer esse cálculo toda vez que você pisca um led no painel deixa o sistema lento! Seu desafio é usar o useMemo para fazer o radar só recalcular a lista quando novas naves aparecerem!

---

🧠 Fundamentos: A Teoria Traduzida

Toda vez que um estado muda, o React redesenha a tela inteira daquele componente. Se dentro do componente tivermos uma conta matemática difícil ou um filtro em uma lista gigante, essa conta vai rodar de novo e de novo, mesmo que os dados não tenham mudado!

Memoização significa “guardar na memória”. O useMemo é uma função que diz ao React: “Guarde o resultado desse cálculo. Só faça a conta de novo se a variável X mudar”.

Estrutura:

const resultado = useMemo(() => {
  return fazerCalculoDemorado(dados);
}, [dados]); // Só roda de novo se 'dados' mudar

---

📖 Exemplo Guiado: Filtrando Naves

Vamos simular um cálculo pesado de filtro.

🛠️ Passo a Passo

Abra o arquivo src/App.jsx e adicione o seguinte código:

import { useState, useMemo } from 'react';
 
function App() {
  const [busca, setBusca] = useState('');
  const [contador, setContador] = useState(0);
 
  const navesInimigas = ['Tie Fighter', 'Tie Bomber', 'Star Destroyer', 'Executor'];
 
  // Sem o useMemo, essa função rodaria até quando clicássemos no contador!
  const navesFiltradas = useMemo(() => {
    console.log('Filtrando naves... (Cálculo pesado)');
    return navesInimigas.filter(nave => 
      nave.toLowerCase().includes(busca.toLowerCase())
    );
  }, [busca]); // Só roda de novo se a busca mudar
 
  return (
    <div>
      <h1>📡 Radar de Otimização</h1>
      
      <input 
        type="text" 
        placeholder="Buscar nave..." 
        value={busca}
        onChange={(e) => setBusca(e.target.value)}
      />
 
      <ul>
        {navesFiltradas.map((nave, index) => <li key={index}>{nave}</li>)}
      </ul>
 
      <hr />
      <p>Outro estado (Leds do Painel): {contador}</p>
      <button onClick={() => setContador(contador + 1)}>Piscar Led</button>
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve e abra o navegador e o Console (F12).
2. Digite algo na busca. Veja a mensagem “Filtrando naves…” aparecer no console.
3. Agora clique no botão “Piscar Led”. O número do contador vai mudar na tela, mas a mensagem NÃO vai aparecer no console! O React usou o resultado guardado na memória!

---

🛠️ Prática Obrigatória 1

Remova o useMemo do código (deixe apenas a função .filter direto) e clique no botão de piscar led. Veja no console o que acontece e entenda a perda de performance!

---

🛠️ Prática Obrigatória 2

Crie uma variável calculada simples usando useMemo que conte quantas naves foram encontradas na busca (com base no tamanho do array navesFiltradas).

---

🔑 Gabarito de Código/Fórmulas

Prática 2:

No App.jsx:

const totalEncontrado = useMemo(() => {
  return navesFiltradas.length;
}, [navesFiltradas]);

---

← Capitulo Anterior | Proximo Capitulo →