Faça o profile antes de mudar qualquer coisa: grave uma sessão de digitação e veja se o tempo vai para o cálculo do filtro, para a renderização das linhas, ou para layout e paint. Os consertos de sempre, em ordem de retorno, são virtualizar para que só as linhas visíveis renderizem, adiar o valor filtrado com useDeferredValue ou uma transição, memoizar o componente de linha, e manter o estado do input separado da lista.
Por que os entrevistadores perguntam isso
Essa é uma pergunta de performance com uma resposta errada óbvia, que é chutar e sair espalhando useMemo. O entrevistador quer ver uma abordagem que mede primeiro, leitura correta da saída do profiler, e conhecimento de qual alavanca de fato importa nessa escala. Ele também quer ouvir você separar os dois problemas distintos, um input que parece grudento e uma lista que demora demais para renderizar.
Como estruturar sua resposta
- Diga que você mede primeiro e cite a ferramenta que você usa.
- Separe o problema: sensação de input lento versus render de lista lento.
- Dê os consertos em ordem de impacto, terminando em virtualização.
- Mencione verificar o conserto com a mesma medição.
Exemplo de resposta
Eu gravaria no React Profiler e no painel de performance do navegador antes de tocar no código, porque existem três causas diferentes que parecem idênticas. Se o commit é enorme, são as linhas. Se o tempo de script está na minha função de filtro, são os dados. Se é layout thrashing, alguma coisa está medindo o DOM por linha. Nove em cada dez vezes, com alguns milhares de linhas, é simplesmente que todas estão renderizando, então a virtualização é a grande vitória, renderizando só a janela visível mais um overscan pequeno. Além disso eu separo as duas atualizações: o input continua urgente para a digitação parecer instantânea, e o resultado filtrado passa por uma transição ou useDeferredValue para o React poder descartar trabalho obsoleto quando a próxima tecla chegar. Memoizar o componente de linha ajuda depois que a lista está virtualizada, e bem menos antes disso. Eu fiz isso numa lista de clientes que ficava inusável por volta de quatro mil linhas, e virtualização mais um valor adiado levaram a interação de uns quatrocentos milissegundos para abaixo de dezesseis.
Vai encarar essa entrevista em breve? O GhostPilot escuta a sua chamada ao vivo, identifica a pergunta no instante em que ela é feita e coloca uma resposta estruturada na sua tela em tempo real. Teste na sua próxima entrevista simulada ou pegue um Session Pass de $29, sem assinatura, para a hora da verdade.
Veja como funcionaPerguntas de acompanhamento que você pode esperar
- Que valor de overscan você escolheria e por quê?
- Como a virtualização afetaria a acessibilidade e a busca na página do navegador?
- Você moveria a filtragem para o servidor, e a partir de que ponto?
Mais perguntas para Desenvolvedor React
Seu entrevistador vai fazer a própria versão desta. Cole a descrição real da vaga no Question Predictor gratuito e receba as 20 perguntas que essa vaga tem mais chance de fazer, com o que cada uma está de fato sondando.
Prever minhas perguntas