9 Perguntas Difíceis de React para Engenheiros Frontend Sênior

[Grego]

9 Perguntas Difíceis de React para Engenheiros Frontend Sênior

StackSnacker

Foto por Mimi Thian no Unsplash

Se você está se candidatando ao cargo de Engenheiro Frontend Sênior, deve se preparar para algumas perguntas rigorosas de React que exigirão que você mergulhe nos detalhes. Para posições de nível sênior, os entrevistadores não estarão apenas buscando conhecimento sobre componentes e hooks; eles avaliarão sua compreensão arquitetural, considerações de desempenho e respeito pela React como uma biblioteca, considerando seus internos.

Aqui estão 9 perguntas difíceis de React que costumam surgir em entrevistas de nível sênior, com uma perspectiva sobre o que os entrevistadores realmente querem ver em suas respostas.

1. Como o React gerencia a memória, e quais são os vazamentos de memória comuns a se observar?

O React gerencia a memória automaticamente desmontando componentes e limpando recursos através do ciclo de vida do componente. Vazamentos de memória ocorrerão se os recursos (referências internas) não forem adequadamente descartados. Vazamentos de memória comuns incluem:

• Ciclos de vida onde um componente pai é incapaz de remover um ouvinte na função de limpeza do useEffect.
• Temporizadores/intervalos não limpos quando desmontados.
• Fechamentos que mantêm estado ou props que se tornaram obsoletos, impedindo assim a coleta de lixo.
• Uso incorreto de refs, armazenando grandes quantidades de dados ou nós do DOM indefinidamente.

Um entrevistador provavelmente quer ver que você assume o controle proativo dos efeitos colaterais e compreende como o uso do DOM virtual do React interage com o DOM real por baixo dos panos.

2. O que são Portais do React, e quando você os usaria?

Portais do React permitem renderizar filhos em um nó do DOM que existe fora da hierarquia de um componente pai. Isso é particularmente útil para elementos de interface como:

• Diálogos modais
• Dicas de ferramenta
• Listas suspensas

Esses componentes muitas vezes precisam escapar das restrições de overflow e z-index do seu contêiner pai. Usar portais permite manter suas hierarquias de componentes lógicos e lógica no código, enquanto renderiza o componente em um lugar completamente diferente no DOM real.

3. Como você lida com autenticação e autorização em um aplicativo React?

Autenticação e autorização geralmente envolvem o controle de acesso em todo o aplicativo. Uma resposta adequada de nível sênior geralmente abordaria:

• Autenticação baseada em JWT, armazenando esses tokens de forma segura, idealmente em cookies httpOnly ou sessionStorage.
• Guarda de rotas usando o React Router <PrivateRoute ou wrappers de rota para restringir acesso com base em papel ou permissão.
• Usando a API de contexto ou bibliotecas de gerenciamento de estado como Redux (Zustand) para persistir o estado do usuário.
• Elementos de interface ou itens de navegação são renderizados condicionalmente com base nos níveis de acesso ou permissões do usuário

Pontos extras se você puder incluir informações sobre atualizações de token, fluxos de logout e provedores de autenticação de terceiros (por exemplo, OAuth).

4. O que são Suspense e Concurrent Mode, e como eles melhoram o desempenho?

O Suspense do React fornece um tratamento declarativo do estado de carregamento para componentes, como componentes carregados lazy ou recuperação de dados.

O Concurrent Mode (que está sendo introduzido gradualmente com recursos como useTransition e startTransition) permite que o motor de renderização do React pause e retome a renderização conforme necessário, priorizando atualizações de alta prioridade e permitindo que ele recupere de interrupções.

Ambos os recursos contribuem para:

• Experiências mais suaves para o usuário (por exemplo, sem travamentos durante entrada ou troca de abas).
• Padrões de interface de carregamento previsíveis.
• Desempenho percebido melhorado, construindo a saída renderizada de forma fragmentada.

5. Como evitar closures desatualizadas ao usar useEffect?

Closures desatualizadas ocorrem quando um efeito interage com props ou estado desatualizados porque a função captura o valor no momento em que foi criada. Algumas coisas que você pode fazer incluem:

• Adicionar corretamente as dependências ao array de dependências do useEffect.
• Usar a forma de atualização funcional do setState para acessar o estado mais recente.
• Usar useRef para persistir valores mutáveis entre renderizações.
• Memoizar callbacks passando-os para componentes filhos ou efeitos.

Compreender closures desatualizadas demonstra que você entende como fechamentos e re-renderizações funcionam no estilo funcional do React.

6. Como você implementaria uma lista com rolagem infinita no React?

Um componente de rolagem infinita precisa carregar dados de forma escalonada (incremental) à medida que o usuário rola. Uma solução mais sofisticada incluiria:

• Utilizar a API Intersection Observer para determinar quando um elemento “sentinela” está visível.
• Coordenar paginação ou cursores nas chamadas à API.
• Virtualizar a lista usando bibliotecas como react-window ou react-virtualized para renderizar apenas os itens visíveis, melhorando o desempenho.
• Debounce ou throttle dos eventos de rolagem para evitar sobrecarregar a interface com atualizações.

Essa é uma questão sobre sua capacidade de arquitetar componentes performáticos e escaláveis com cargas de dados do mundo real.

7. Qual seria o seu método para persistir estado entre recarregamentos de página em um aplicativo React?

Dependendo da descrição de “persistência de estado”, você poderia presumir:

• Usar localStorage ou sessionStorage para persistir o estado entre sessões ou abas.
• Hidratar o estado a partir do armazenamento ao abrir o aplicativo, possivelmente com inicialização lenta usando useState.
• Usar Redux Persist ou outras bibliotecas para aplicativos com complexidade e estruturas de armazenamento mutáveis.
• Estar ciente de segurança e desempenho — não armazene dados sensíveis não criptografados no localStorage.

O entrevistador quer saber não apenas o que você usaria, mas por quê e quando é apropriado.

8. Como o React agrupa atualizações de estado, e quando ele não as agrupa?

O React agrupa várias atualizações para emitir uma única renderização por razões de desempenho, especialmente em manipuladores de eventos e métodos de ciclo de vida. Mas ele não agrupa atualizações em todos os casos.

• Ao trabalhar com setTimeout e Promise, ou em outras funções de ouvinte personalizadas, as atualizações de estado podem ocorrer uma de cada vez.
• O React 18 trouxe agrupamento automático mesmo em contextos assíncronos, mas é importante entender quando ele não vai agrupar atualizações por questões de desempenho.

Você também deve estar familiarizado com o flushing de atualizações de forma síncrona com flushSync() e a introdução de transições com startTransition() quando precisar de controle mais granular sobre suas atualizações.

9. Como você analisa e otimiza o desempenho de renderização em aplicações React?

Uma das habilidades-chave que engenheiros seniores possuem é a capacidade de otimizar desempenho. Algumas técnicas de alto nível a considerar incluem:

• Usar o React Profiler para verificar renders desnecessários.
• Memoizar componentes usando React.memo, useMemo ou useCallback.
• Usar Context ou soluções de gerenciamento de estado em vez de prop drilling.
• Utilizar code-splitting e lazy-loading para dividir seus bundles.
• Virtualizar listas quando elas ficam muito longas.
• Minimizar quando seus componentes atualizam, entender quando atualizam e, por fim, entender por quê.

Bônus: Ser capaz de demonstrar um problema de desempenho que você resolveu em um projeto de engenharia anterior pode ser altamente impactante em entrevistas.

Pensamentos Finais

Essas perguntas fornecem insights sobre os internos do React, decisões arquiteturais e problemas de desempenho. A segunda (e às vezes a primeira) pergunta, uma vez que estabelecemos React e desempenho, parece ser uma área onde podemos separar um engenheiro frontend sênior de um desenvolvedor intermediário.

Se você está se preparando para entrevistas, preste atenção ao “porquê” do “como”. Os entrevistadores querem ver a justificativa para suas decisões, levando em consideração sua experiência do mundo real e todas as tradeoffs.

Qual é a sua pergunta mais desafiadora de entrevista de React?
Poste nos comentários, e vamos conversar sobre como abordá-la.