1. "Como funciona especificamente o algoritmo Diff do React?"

Pontos-chave da resposta: Comparação no mesmo nível, otimização com chaves, diferenças no tipo de componente.

Contexto Técnico Detalhado:

O algoritmo de difusão do React baseia-se em duas premissas que otimizam a complexidade de O(n³) para O(n):

1. Elementos de tipos diferentes produzem estruturas distintas (ex: <div> para <span>).
2. Desenvolvedores podem usar a prop key para indicar quais filhos permanecem estáveis entre renderizações.

Estratégias Fundamentais:

• Estratégia 1: Componentes/elementos de tipos diferentes
  • Comportamento: Quando o nó raiz ou tipo do componente difere (ex: <div> → <span> ou <ClassComponent> → <FunctionComponent>), o React descarta completamente a subárvore antiga e reconstrói uma nova.
  • Lógica interna: Na reconcileChildFibers, se o tipo do Fiber antigo e novo forem diferentes, o antigo recebe a tag de efeito Deletion e um Fiber totalmente novo é criado.
  • Exemplo: <div><Contador /></div> → <span><Contador /></span>. Mesmo que o componente Contador não tenha mudado, ele será desmontado e remontado, acionando todo o ciclo de vida (constructor → render → componentDidMount).
• Estratégia 2: Elementos DOM do mesmo tipo
  • Comportamento: O React preserva o nó do DOM e apenas compara e atualiza as propriedades alteradas.
  • Lógica interna: Na função updateHostComponent, as props antigas e novas são comparadas (ex: className, style), gerando uma carga de atualização aplicada na fase de Commit ao DOM real.
• Estratégia 3: Elementos de componente do mesmo tipo
  • Comportamento: O React mantém a instância do componente, atualiza suas props e chama os ciclos de vida de atualização (ex: getDerivedStateFromProps, shouldComponentUpdate, render).
  • Para componentes de função: A função é chamada diretamente com as novas props e contexto.
• Estratégia 4: Recursão nos nós filhos (a parte mais complexa)
  • Comportamento padrão (sem key): O React percorre simultaneamente as listas de nós filhos antigos e novos. Ao encontrar diferenças, adota a "comparação por índice". Por exemplo, inserir um elemento no início da lista faz com que todos os itens subsequentes sejam considerados "alterados", causando atualizações ou reconstruções desnecessárias e péssimo desempenho.
  • Comportamento otimizado (com key):
  • Lógica interna: O React usa um algoritmo baseado em Map. Primeiro, percorre os novos nós filhos e constrói um mapeamento (key → oldFiber) usando um Map.
  • Processo de correspondência: Depois percorre o novo array de ReactElement, procurando no Map por um oldFiber reutilizável via key.
  • Se encontrado (mesma key e mesmo type), reutiliza o Fiber com a tag Update.
  • Se não encontrado, cria um novo Fiber.
  • Resultado: Através da key, o React identifica itens que apenas mudaram de posição, maximizando a reutilização de nós DOM e instâncias de componentes, realizando apenas operações de movimentação — chave para a otimização de performance.

2. "O setState é síncrono ou assíncrono?"

Resposta: Em eventos sintéticos e ciclos de vida do React, é "assíncrono"; em eventos nativos e setTimeout, é síncrono.

Análise Técnica:

Isso é fundamentalmente uma questão de processamento em lote (batching).

• React 17 e anteriores: Batching baseado em executionContext
  • Mecanismo central: O React mantém uma variável global executionContext. Por exemplo, em batchedEventUpdates, executionContext é definido como BatchedContext.
  • A essência do "assíncrono": Ao chamar setState, ele verifica o executionContext atual. Se estiver em BatchedContext, a atualização é enfileirada e processada em lote ao final do evento, criando a ilusão de assincronicidade.
  • Cenários "síncronos": Em setTimeout ou ouvintes de eventos nativos, executionContext é NoContext, então setState dispara uma re-renderização síncrona imediatamente, sem batching.
• React 18+: Batching automático com createRoot
  • Alteração significativa: Independentemente de onde a atualização ocorra (evento sintético, setTimeout, evento nativo), o React 18 realiza batching automático por padrão.
  • Mecanismo de implementação: Em vez de depender do executionContext instável, utiliza um mecanismo de prioridade e agendamento mais robusto. Todas as atualizações são enfileiradas e executadas pelo Scheduler.
  • Como forçar síncrono?: Use ReactDOM.flushSync() para sair do batching e forçar a execução síncrona das atualizações dentro do seu callback.

// Exemplo no React 18
flushSync(() => {
  setContagem(contagem + 1); // Renderização síncrona
});
setContagem(contagem + 1); // Batching, renderização assíncrona

3. "Qual é a diferença essencial nos ciclos de vida entre componentes de Clase e de Função?"

Conceito fundamental: Classse adota uma abordagem temporal baseada em pontos do ciclo de vida, enquanto Função adota uma abordagem declarativa baseada em estado e efeitos colaterais.

• Componentes de Classe: Imperativo, focado no ciclo de vida
  • Modelo mental: "Neste ponto do tempo (ex: após montagem, após atualização, antes da desmontagem) eu devo fazer algo."
  • Problemas:
  1. Separação de responsabilidades fraca: Lógicas relacionadas (ex: inscrição em dados) são divididas em componentDidMount e componentWillUnmount, enquanto lógicas não relacionadas se aglomeram no mesmo método.
  2. Problema com "this": Exige vinculação manual de manipuladores de eventos, propenso a erros.
  3. Dificuldade para compartilhar lógica de estado: Antes dos Hooks, só era possível via HOC ou Render Props, levando ao "inferno de wrappers".
• Componentes de Função + Hooks: Declarativo, focado em estado e efeitos
  • Modelo mental: "Este componente precisa, com base em quais estados, produzir quais efeitos colaterais."
  • Cada renderização é um snapshot independente: Cada renderização possui suas próprias props, state e efeitos. O useEffect captura os valores da renderização na qual foi definido.
  • useEffect como mecanismo unificado para efeitos declarativos:
  • componentDidMount + componentDidUpdate → useEffect(fn) / useEffect(fn, [deps])
  • componentWillUnmount → Função de limpeza do useEffect: return () => {...}
  • Vantagens:
  1. Melhor separação de responsabilidades: Permite agrupar a lógica de configuração e limpeza de um temporizador.
  2. Reutilização de lógica: Fácil extração e reutilização de lógica de estado através de Hooks customizados.

4. "Como implementar manualmente um Hook useState simples?"

Isso testa a compreensão de closures e da arquitetura Fiber.

// Implementação simplificada, ignorando muitos casos de borda (ex: reducer, função inicial)
let estados = []; // Armazenamento de estados
let atualizadores = []; // Armazenar todas as funções setState
let cursor = 0; // Índice atual do Hook

function renderizar(Componente) {
  const Comp = Componente();
  Comp.renderizar();
  cursor = 0; // Resetar índice para a próxima renderização
  return Comp;
}

function useState(valorInicial) {
  // Na renderização inicial, inicializar estado
  if (typeof estados[cursor] === 'undefined') {
    estados[cursor] = valorInicial;
  }

  // Congelar valor do cursor atual para criar closure
  const cursorAtual = cursor;
  const setState = (novoValor) => {
    estados[cursorAtual] = novoValor;
    // Acionar nova renderização (no React real, isso agenda uma atualização)
    // Aqui simulamos simplesmente
    agendarReRenderizacao();
  };

  atualizadores.push(setState);

  // Retornar estado atual e sua função setState, depois avançar cursor
  const valor = estados[cursor];
  cursor++;
  return [valor, setState];
}

// Simular agendamento do React
function agendarReRenderizacao() {
  // No React real, agendaria uma nova renderização
  // Simulamos chamando renderizar diretamente
  renderizar(MeuComponente);
}

// Exemplo de uso
function MeuComponente() {
  const [contagem, setContagem] = useState(0);
  const [texto, setTexto] = useState('olá');

  return {
    renderizar: () => {
      console.log(`Contagem: ${contagem}, Texto: ${texto}`);
    },
    clique: () => setContagem(contagem + 1),
    digitar: (novoTexto) => setTexto(novoTexto),
  };
}

// Inicializar array de estados
estados = [];
atualizadores = [];
const app = renderizar(MeuComponente); // Saída: Contagem: 0, Texto: olá
app.clique(); // Dispara nova renderização, saída: Contagem: 1, Texto: olá

Pontos-chave:

• Armazenamento de estado: O estado é armazenado no array estados externo à função do componente.
• Ordem de invocação: Depende do cursor para registrar qual Hook é o atual — é por isso que Hooks não podem estar em declarações condicionais.
• Closure: Cada função setState captura, através de cursorAtual, o índice do estado correspondente à sua criação.

5. "Como funciona a renderização concorrente no React 18? Qual a diferença entre startTransition e setTimeout?"

Conceito central: Agendamento por prioridade e renderização interrompível.

• Como funciona a renderização concorrente?
  • Modo antigo (síncrono/bloqueante): Uma vez iniciada a renderização, deve ser concluída de uma vez, até que toda a árvore de componentes seja atualizada. Bloqueia a thread principal durante o processo.
  • Modo concorrente (interrompível): O React divide o trabalho de renderização em unidades pequenas. Trabalha por um curto período (ex: 5ms) em cada frame do navegador (~16ms), verificando então se há tarefas de prioridade mais alta (ex: entrada do usuário, animações). Se houver, o React pausa o trabalho de renderização atual, libera a thread principal e retorna (ou mesmo descarta) o trabalho anterior após as tarefas de alta prioridade serem concluídas.
• startTransition vs setTimeout
  • startTransition:
  • Objetivo: Marcar uma atualização de UI não urgente.
  • Comportamento: Marca a chamada setState envolvida como uma atualização de transição de baixa prioridade. Isso significa:
  1. Interrompível: Se o usuário realizar uma interação (atualização de alta prioridade) durante a transição, o React interromperá a renderização da transição para processar a interação primeiro.
  2. Exibe UI degradada: Comumente usado com Suspense para exibir um fallback enquanto a transição é processada.
  • Essência: É uma troca de prioridade.
  • setTimeout:
  • Objetivo: Atrasar a execução do código.
  • Comportamento: Coloca a atualização na fila de macrotarefas, executando após o atraso especificado. No entanto, uma vez iniciada, continua sendo uma renderização síncrona, bloqueante e não interrompível.
  • Problemas:
  1. Atraso fixo: Difícil definir um tempo de atraso perfeito.
  2. Não interrompível: Mesmo que o usuário esteja digitando após o atraso, a renderização prosseguirá normalmente, podendo causar travamentos.
  3. Impossibilidade de exibir estado de carregamento: Durante o atraso, a UI não pode fornecer feedback (ex: mostrar um loading).

Resumo: O startTransition é um mecanismo de atraso nativo e inteligente dentro do modelo concorrente do React, mantendo a interface responsiva através do controle de prioridade. O setTimeout é uma ferramenta cronometrada bruta e cega, incapaz de cooperar com o sistema de agendamento do React.