Perguntas de entrevista React

O que é o Virtual DOM e como funciona a reconciliação?

O Virtual DOM é uma árvore de elementos em memória que o React compara com a árvore anterior para calcular o conjunto mínimo de operações reais no DOM. A reconciliação compara nó por nó: um tipo de elemento diferente descarta toda a subárvore, e a prop key diz ao React quais filhos se moveram em vez de terem mudado. O valor não é velocidade bruta — é que você descreve o estado alvo e o React calcula as mutações.

Explique as regras dos hooks. Por que você não pode chamar hooks dentro de condições?

Hooks devem ser chamados no nível superior de um componente ou de um hook personalizado, na mesma ordem a cada render. O React guarda o estado dos hooks em um array indexado pela ordem de chamada, então um hook condicional desloca cada índice seguinte e um componente passa a ler o estado de outro hook. Por isso existe a regra do linter — o modo de falha é silencioso e extremamente confuso.

Qual é a diferença entre useMemo, useCallback e React.memo?

useMemo faz cache de um valor calculado, useCallback faz cache de uma identidade de função, e React.memo pula o re-render de um componente quando suas props são superficialmente iguais. Eles funcionam juntos: memoizar um callback não faz sentido a menos que o filho esteja envolto em React.memo. Os três custam memória e tempo de comparação, então aplique-os a problemas medidos, não por padrão.

O que é um closure em JavaScript? Dê um exemplo.

Um closure é uma função empacotada com o escopo em que foi criada, mantendo acesso a essas variáveis depois que a função externa retorna. No React isso explica o estado obsoleto: um efeito ou callback captura o valor do estado do render em que foi criado, então um interval configurado uma vez continua lendo o valor inicial. Os ajustes são uma atualização de estado funcional ou adicionar a dependência ao efeito.

Explique o event loop: como funcionam microtasks e macrotasks?

A call stack roda código síncrono até terminar, depois o event loop esvazia toda a fila de microtasks — callbacks de promises e queueMicrotask — antes de pegar uma macrotask como um timer ou um callback de I/O. Por isso uma cadeia de promises resolve antes de um setTimeout com delay zero. Isso também explica por que um loop infinito de microtasks trava o rendering enquanto uma cadeia de timers não.

Por que a prop key é necessária em listas? Por que você deveria evitar usar o índice?

As keys permitem que o React combine filhos entre renders, movendo nós do DOM em vez de recriá-los, preservando estado e foco. Usar o índice do array quebra isso quando a lista é reordenada ou um item é inserido, porque o índice 0 agora se refere a um elemento diferente — o React reutiliza o nó de DOM errado e o estado do componente acaba na linha errada. Um identificador estável vindo dos dados é a key correta.

O que são componentes controlados e não controlados?

Um input controlado tem seu valor vindo do estado do React e atualiza via onChange, então o estado é a única fonte de verdade e validação ou formatação ficam diretas. Um input não controlado mantém seu valor no DOM e você o lê por meio de um ref quando precisa. Controlado é a escolha padrão; não controlado serve para inputs de arquivo, integrações com código fora do React, e formulários muito grandes onde renderizar a cada tecla custa demais.

Como funciona o useEffect? O que é a função de cleanup?

useEffect roda depois que o render é confirmado na tela, e roda de novo sempre que um valor no array de dependências muda. Retornar uma função dele registra um cleanup, que o React chama antes da próxima execução e ao desmontar — é aí que você cancela assinaturas, timers e requests em andamento. Esquecer o cleanup é a causa usual de vazamentos de memória e atualizações de estado em componentes desmontados.

O que é prop drilling e como você evita isso?

Prop drilling é passar dados por componentes que não os usam, só para alcançar um descendente profundo. Context resolve isso para valores que são genuinamente globais a uma subárvore, como tema, idioma ou o usuário atual. Para dados que mudam com frequência, uma lib de estado ou composição de componentes — passar elementos como children — costuma ser melhor, já que context re-renderiza cada consumidor a cada mudança.

Qual é a diferença entre == e ===? O que é coerção?

=== compara valor e tipo sem conversão, enquanto == converte os operandos para um tipo comum primeiro, o que produz resultados como null == undefined ser true e [] == false ser true. Coerção é essa conversão implícita, e segue regras complexas o bastante para poucas pessoas lembrarem sob pressão. Use === em todo lugar; a exceção comum é x == null para pegar tanto null quanto undefined.