Stop Using useMemo Wrong: A Practical Guide to React Performance

/* ================================================ * ❌ PROBLEMA: Por que isso não funciona? *  * O objeto filters é RECRIADO a cada render. * Mesmo que os valores sejam iguais, a referência * na memória é diferente. *  * Resultado: useMemo SEMPRE recalcula * ================================================ */function ListaProdutos({ filtros, produtos }) {  const produtosFiltrados = useMemo(() => {    console.log('🔄 Filtrando produtos...');    return produtos.filter(produto =>       filtros.categorias.includes(produto.categoria) &&      produto.preco >= filtros.precoMinimo    );  }, [filtros, produtos]); // ❌ filtros muda toda hora    return <Lista items={produtosFiltrados} />;}// Cada render cria um NOVO objeto filtros<ListaProdutos   filtros={{ categorias: ['eletrônicos'], precoMinimo: 100 }}   produtos={produtos} />

/* ================================================ * 💡 EXPLICAÇÃO SIMPLES: *  * Ao invés de passar objeto inteiro, extraímos * os valores primitivos (string, number). *  * React consegue comparar esses valores corretamente * e só recalcula quando REALMENTE mudarem. * ================================================ */function ListaProdutos({ filtros, produtos }) {  // Extrair valores primitivos  const { categorias, precoMinimo } = filtros;  const categoriasString = categorias.join(','); // String é primitivo    const produtosFiltrados = useMemo(() => {    console.log('🔄 Filtrando produtos...');    return produtos.filter(produto =>       categorias.includes(produto.categoria) &&      produto.preco >= precoMinimo    );  }, [categoriasString, precoMinimo, produtos]); // ✅ Só primitivos    return <Lista items={produtosFiltrados} />;}

/* ================================================ * ❌ PROBLEMA: Over-optimization *  * Essas operações são MUITO rápidas (< 0.01ms). * useMemo está consumindo memória e fazendo comparações * desnecessárias. *  * Resultado: App usa mais memória sem ganho real * ================================================ */function PerfilUsuario({ usuario, preferencias }) {  const nomeUsuario = useMemo(() => usuario.nome, [usuario.nome]); // ❌  const idade = useMemo(() => 2024 - usuario.anoNascimento, [usuario.anoNascimento]); // ❌  const isAdmin = useMemo(() => usuario.role === 'admin', [usuario.role]); // ❌    // ✅ Esse sim vale a pena memoizar (operação cara)  const estatisticasComplexas = useMemo(() => {    return calcularAnaliseCompleta(usuario.atividade, preferencias.metricas);  }, [usuario.atividade, preferencias.metricas]);    return (    <div>      {nomeUsuario} - {idade} anos - {isAdmin ? 'Admin' : 'User'}      <GraficoEstatisticas dados={estatisticasComplexas} />    </div>  );}

/* ================================================ * 💡 EXPLICAÇÃO SIMPLES: *  * Operações baratas: sem useMemo * Operações caras: com useMemo *  * Como saber? Se demora menos de 1ms, não memoize. * Use console.time() para medir. * ================================================ */function PerfilUsuario({ usuario, preferencias }) {  // ✅ Operações simples: sem useMemo  const nomeUsuario = usuario.nome;  const idade = 2024 - usuario.anoNascimento;  const isAdmin = usuario.role === 'admin';    // ✅ Operação cara: COM useMemo  const estatisticasComplexas = useMemo(() => {    console.time('Cálculo Estatísticas');    const resultado = calcularAnaliseCompleta(usuario.atividade, preferencias.metricas);    console.timeEnd('Cálculo Estatísticas'); // Mostra tempo no console    return resultado;  }, [usuario.atividade, preferencias.metricas]);    return (    <div>      {nomeUsuario} - {idade} anos - {isAdmin ? 'Admin' : 'User'}      <GraficoEstatisticas dados={estatisticasComplexas} />    </div>  );}

// Hook pra medir se vale a pena memoizarfunction useMemoWithProfiling(factory, deps, nome) {  return useMemo(() => {    const inicio = performance.now();    const resultado = factory();    const fim = performance.now();        console.log(`${nome}: ${(fim - inicio).toFixed(2)}ms`);        return resultado;  }, deps);}// Usoconst dados = useMemoWithProfiling(  () => processarDadosGrandes(rawData),  [rawData],  'Processar Dados');

/* ================================================ * ❌ PROBLEMA: Novas funções em cada render *  * Cada render cria NOVAS funções onToggle e onDelete. * Componentes TodoItem re-renderizam mesmo que * o todo não tenha mudado. *  * Resultado: Lista com 100 items = 100 re-renders * ================================================ */function ListaTodos({ todos, onUpdate }) {  return (    <div>      {todos.map(todo => (        <TodoItem          key={todo.id}          todo={todo}          onToggle={() => onUpdate(todo.id, !todo.completo)} // ❌ Nova função          onDelete={() => onUpdate(todo.id, null)} // ❌ Nova função        />      ))}    </div>  );}// TodoItem está usando React.memo mas não adiantaconst TodoItem = React.memo(({ todo, onToggle, onDelete }) => {  console.log(`Renderizando ${todo.id}`);  return (    <div>      <span>{todo.texto}</span>      <button onClick={onToggle}>✓</button>      <button onClick={onDelete}>🗑️</button>    </div>  );});

/* ================================================ * 💡 EXPLICAÇÃO SIMPLES: *  * Ao invés de criar funções novas, criamos uma * "fábrica de funções" memoizada. *  * A fábrica retorna sempre a MESMA função para * cada todo.id, evitando re-renders desnecessários. * ================================================ */function ListaTodos({ todos, onUpdate }) {  // Fábrica de funções memoizada  const criarHandlerToggle = useMemo(() =>     (todoId, completo) => () => onUpdate(todoId, completo)  , [onUpdate]);    const criarHandlerDelete = useMemo(() =>     (todoId) => () => onUpdate(todoId, null)  , [onUpdate]);    return (    <div>      {todos.map(todo => (        <TodoItem          key={todo.id}          todo={todo}          onToggle={criarHandlerToggle(todo.id, !todo.completo)}          onDelete={criarHandlerDelete(todo.id)}        />      ))}    </div>  );}const TodoItem = React.memo(({ todo, onToggle, onDelete }) => {  console.log(`Renderizando ${todo.id}`);  return (    <div>      <span>{todo.texto}</span>      <button onClick={onToggle}>✓</button>      <button onClick={onDelete}>🗑️</button>    </div>  );});

const handleClick = useCallback((id) => {  onUpdate(id);}, [onUpdate]);

/* ================================================ * ❌ PROBLEMA: Memoizando mesmo invisível *  * Component está escondido (display: none) mas * continua processando dados pesados. *  * Resultado: Memória e CPU desperdiçados * ================================================ */function PainelDados({ dados, isVisivel }) {  const dadosProcessados = useMemo(() => {    console.log('🔄 Processando dados...');    return processamentoMuitoPesado(dados);  }, [dados]); // Roda mesmo quando isVisivel = false    if (!isVisivel) {    return null; // Componente não renderiza mas já processou tudo  }    return <Grafico dados={dadosProcessados} />;}

/* ================================================ * 💡 EXPLICAÇÃO SIMPLES: *  * Só processar quando realmente necessário: * - Componente está visível * - Dados são grandes (> 100 items) *  * Se não precisa agora, não processa. * ================================================ */function PainelDados({ dados, isVisivel }) {  const dadosGrandes = dados.length > 100;  const deveMemoizar = isVisivel && dadosGrandes;    const dadosProcessados = useMemo(() => {    if (!deveMemoizar) {      return processamentoMuitoPesado(dados);    }    console.log('🔄 Processando dados (memoizado)...');    return processamentoMuitoPesado(dados);  }, deveMemoizar ? [dados] : []); // Array vazio = sempre recalcula    if (!isVisivel) {    return null;  }    return <Grafico dados={dadosProcessados} />;}

// Hook customizado pra memoização inteligentefunction useMemoizacaoInteligente(factory, deps, condicoes) {  const { isVisivel = true, tamanhoMinimo = 0 } = condicoes;    const deveMemoizar = isVisivel &&     (deps[0]?.length || 0) >= tamanhoMinimo;    return useMemo(() => {    if (!deveMemoizar) {      return factory();    }    return factory();  }, deveMemoizar ? deps : []);}// Usofunction PainelDados({ dados, isVisivel }) {  const dadosProcessados = useMemoizacaoInteligente(    () => processamentoMuitoPesado(dados),    [dados],    { isVisivel, tamanhoMinimo: 100 }  );    if (!isVisivel) return null;  return <Grafico dados={dadosProcessados} />;}

/* ================================================ * ❌ PROBLEMA: Um useMemo fazendo tudo *  * Se chartConfig mudar (coisa barata), TUDO * é recalculado: filtro caro, agregação cara, * e formatação barata. *  * Resultado: Mudou cor do gráfico = recalcula tudo * ================================================ */function Dashboard({ dadosRaw, filtros, chartConfig }) {  const dadosProntos = useMemo(() => {    console.log('🔄 TUDO sendo recalculado...');    const filtrados = aplicarFiltros(dadosRaw, filtros); // Caro    const agregados = agregarMetricas(filtrados); // Caro    const formatados = formatarParaGrafico(agregados, chartConfig); // Barato    return formatados;  }, [dadosRaw, filtros, chartConfig]); // ❌ chartConfig força tudo    return <Grafico dados={dadosProntos} />;}

/* ================================================ * 💡 EXPLICAÇÃO SIMPLES: *  * Separar em camadas: * 1. Operação mais cara (filtro) * 2. Operação cara (agregação) * 3. Operação barata (formatação) *  * Cada uma só recalcula se SUA dependência mudar. * ================================================ */function Dashboard({ dadosRaw, filtros, chartConfig }) {  // Camada 1: Mais cara, depende de dados + filtros  const dadosFiltrados = useMemo(() => {    console.log('🔄 Filtrando dados...');    return aplicarFiltros(dadosRaw, filtros);  }, [dadosRaw, filtros]);    // Camada 2: Cara, depende só dos dados filtrados  const dadosAgregados = useMemo(() => {    console.log('🔄 Agregando métricas...');    return agregarMetricas(dadosFiltrados);  }, [dadosFiltrados]);    // Camada 3: Barata, depende de agregados + config  const dadosFormatados = useMemo(() => {    console.log('🔄 Formatando para gráfico...');    return formatarParaGrafico(dadosAgregados, chartConfig);  }, [dadosAgregados, chartConfig]); // ✅ Só reroda formatação    return <Grafico dados={dadosFormatados} />;}

chartConfig muda:❌ Antes: Filtro → Agregação → Formatação (TUDO)✅ Depois: Formatação (SÓ ISSO)filtros muda:✅ Filtro → Agregação → Formatação (necessário)dadosRaw muda:✅ Filtro → Agregação → Formatação (necessário)

/* ================================================ * ❌ PROBLEMA: Múltiplas requisições iguais *  * Cada render pode disparar nova requisição, * mesmo que userId seja o mesmo. *  * Resultado: API recebe 10 chamadas idênticas * ================================================ */function PerfilUsuario({ userId }) {  const [userData, setUserData] = useState(null);  const [loading, setLoading] = useState(false);    useEffect(() => {    setLoading(true);    buscarDadosUsuario(userId).then(dados => {      setUserData(dados);      setLoading(false);    });  }, [userId]); // Re-roda toda vez    if (loading) return <div>Carregando...</div>;  return <div>{userData?.nome}</div>;}

/* ================================================ * 💡 EXPLICAÇÃO SIMPLES: *  * Criar hook que: * 1. Guarda resultado da requisição * 2. Só faz nova requisição se userId mudar * 3. Cancela requisição se componente desmontar * ================================================ */function useAsyncMemo(asyncFactory, deps) {  const [state, setState] = useState({    data: null,    loading: true,    error: null  });    // Memoiza a última combinação de deps vista  const depsString = deps.map(d => JSON.stringify(d)).join(',');    useEffect(() => {    let cancelado = false;        asyncFactory()      .then(data => {        if (!cancelado) {          setState({ data, loading: false, error: null });        }      })      .catch(error => {        if (!cancelado) {          setState({ data: null, loading: false, error });        }      });        return () => {      cancelado = true; // Cancela se componente desmontar    };  }, [depsString]);    return state;}// Usofunction PerfilUsuario({ userId }) {  const { data: userData, loading, error } = useAsyncMemo(    () => buscarDadosUsuario(userId),    [userId]  );    if (loading) return <div>Carregando...</div>;  if (error) return <div>Erro: {error.message}</div>;  return <div>{userData?.nome}</div>;}

// Hook com cache de 5 minutosfunction useAsyncMemoComCache(asyncFactory, deps, tempoCacheMs = 5 * 60 * 1000) {  const cache = useRef(new Map());  const [, forceUpdate] = useState(0);    const cacheKey = JSON.stringify(deps);  const cached = cache.current.get(cacheKey);    const estaNovo = cached &&     (Date.now() - cached.timestamp < tempoCacheMs);    useEffect(() => {    if (estaNovo) return; // Usa cache        let cancelado = false;        cache.current.set(cacheKey, {      data: cached?.data || null,      loading: true,      timestamp: Date.now()    });    forceUpdate(n => n + 1);        asyncFactory()      .then(data => {        if (!cancelado) {          cache.current.set(cacheKey, {            data,            loading: false,            timestamp: Date.now()          });          forceUpdate(n => n + 1);        }      })      .catch(error => {        if (!cancelado) {          cache.current.set(cacheKey, {            data: null,            loading: false,            error,            timestamp: Date.now()          });          forceUpdate(n => n + 1);        }      });        return () => {      cancelado = true;    };  }, [cacheKey, estaNovo]);    return cache.current.get(cacheKey) || {     data: null,     loading: true   };}// Usofunction PerfilUsuario({ userId }) {  const { data, loading, error } = useAsyncMemoComCache(    () => buscarDadosUsuario(userId),    [userId],    5 * 60 * 1000 // 5 minutos de cache  );    if (loading) return <div>Carregando...</div>;  if (error) return <div>Erro: {error.message}</div>;  return <div>{data?.nome}</div>;}