Spec Frontend Com React • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 05.1 — Memoização de Cálculos Pesados com useMemo

Contexto: Memoização de Cálculos Pesados com useMemo no contexto de Memoização e Otimização com useMemo e useCallback.

Requisitos de Execução:

  1. Filtrar lista de 10.000 itens com useMemo recalculando apenas quando o termo de busca for alterado.

Resultado Esperado

Cálculo caro executado apenas quando a dependência `termo` mudar.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_1_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Memoização e Otimização com useMemo e useCallback
🔑 Gabarito de Código & Solução Comentada 
// FilterListMemo.tsx
import React, { useState, useMemo } from 'react';

export const FilterListMemo: React.FC<{ items: string[] }> = ({ items }) => {
  const [termo, setTermo] = useState('');

  const itensFiltrados = useMemo(() => {
    console.log('Executando filtro pesado...');
    return items.filter(i => i.toLowerCase().includes(termo.toLowerCase()));
  }, [items, termo]);

  return <div>{itensFiltrados.length} itens encontrados</div>;
};

🔍 Nível 2: Prática

Problema 05.2 — Estabilização de Referências de Funções com useCallback

Contexto: Estabilização de Referências de Funções com useCallback no contexto de Memoização e Otimização com useMemo e useCallback.

Requisitos de Execução:

  1. Envolver handler de exclusão com useCallback para evitar re-renderizações desnecessárias de componentes filhos memoizados.

Resultado Esperado

Referência estável da função preservada entre re-renders do componente pai.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_2_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Memoização e Otimização com useMemo e useCallback
🔑 Gabarito de Código & Solução Comentada 
// ParentChildCallback.tsx
import React, { useState, useCallback } from 'react';

export const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleDelete = useCallback((id: number) => {
    console.log('Deletando item:', id);
  }, []);

  return <button onClick={() => setCount(c => c + 1)}>Re-render ({count})</button>;
};

⚡ Nível 3: Integração

Problema 05.3 — Prevenção de Re-render com React.memo e Comparadores Customizados

Contexto: Prevenção de Re-render com React.memo e Comparadores Customizados no contexto de Memoização e Otimização com useMemo e useCallback.

Requisitos de Execução:

  1. Envolver componente de linha de tabela em React.memo com função de comparação areEqual(prev, next).

Resultado Esperado

Componente filho re-renderizado apenas se o status do item for modificado.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_3_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Memoização e Otimização com useMemo e useCallback
🔑 Gabarito de Código & Solução Comentada 
// MemoizedRow.tsx
import React, { memo } from 'react';

interface RowProps { id: number; title: string; done: boolean; }

export const TableRow = memo<RowProps>(({ id, title, done }) => {
  console.log('Renderizando linha:', id);
  return <tr><td>{title}</td><td>{done ? 'SIM' : 'NÃO'}</td></tr>;
}, (prev, next) => prev.done === next.done && prev.title === next.title);

🏆 Nível 4: Desafio Corporativo

Problema 05.4 — Diagnóstico de Performance com React Profiler e Por que Não Memoizar Tudo

Contexto: Diagnóstico de Performance com React Profiler e Por que Não Memoizar Tudo no contexto de Memoização e Otimização com useMemo e useCallback.

Requisitos de Execução:

  1. Medir métricas de renderização (actualDuration, baseDuration) usando <Profiler>.

Resultado Esperado

Métricas de renderização auditadas sem overhead de memoizações desnecessárias.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_4_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Memoização e Otimização com useMemo e useCallback
🔑 Gabarito de Código & Solução Comentada 
// ProfilerDemo.tsx
import React, { Profiler } from 'react';

export const ProfiledSection = () => {
  const onRender = (id: string, phase: string, actualDuration: number) => {
    console.log(`[Profiler] ${id} (${phase}): ${actualDuration.toFixed(2)}ms`);
  };

  return (
    <Profiler id="SecaoCritica" onRender={onRender}>
      <div>Conteúdo Corporativo</div>
    </Profiler>
  );
};
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos