React Performance: Tecnicas que Impressionam em Entrevistas de Big Tech

## Por Que React Performance E Testado em Entrevistas de Big Tech Entrevistas tecnicas de empresas como Meta, Google, Airbnb, Stripe e Shopify nao avaliam so se voce sabe usar React. Elas testam se voce entende o que acontece por baixo dos panos — como o reconciliador funciona, quando o componente re-renderiza, e como voce identifica e resolve problemas de performance sem otimizacao prematura. A razao e pratica: produtos dessas empresas tem milhoes de usuarios ativos. Eles querem engenheiros que tomam decisoes informadas sobre performance, nao engenheiros que adicionam `useMemo` em tudo porque viram em um tutorial. ## Como o React Decide o Que Re-Renderizar Por padrao, quando um componente re-renderiza, todos os seus filhos re-renderizam tambem. O React compara o output anterior com o novo (reconciliacao) e atualiza apenas o que mudou no DOM — mas a fase de render acontece para todos os filhos. Isso nao e necessariamente um problema. Renders sao baratos na maioria dos casos. O problema aparece quando: - Um componente executa calculos pesados a cada render - Uma lista muito grande re-renderiza sem mudancas nos dados - Callbacks criados no pai fazem filhos perderem a referencia desnecessariamente ## React.memo: Quando Usar e Quando Evitar `React.memo` envolve um componente em uma verificacao de igualdade superficial nas props. Se as props nao mudaram, o componente nao re-renderiza. **Quando usar**: componentes puros que recebem dados primitivos ou objetos estaveis, renderizados em contextos onde o pai re-renderiza frequentemente sem que as props do filho mudem. **Quando NAO usar**: na maioria dos componentes. React.memo tem custo — a comparacao de props acontece em todo render do pai. Se o componente e simples, o overhead pode ser maior que o custo de re-renderizar. Um erro comum em entrevistas e dizer "uso React.memo em todos os componentes para evitar re-renders". A resposta esperada inclui quando a otimizacao faz sentido com base em medicao. ## useMemo: Memorizando Calculos Pesados `useMemo` memoriza o resultado de um calculo entre renders. Use quando voce tem uma operacao cara que nao precisa ser refeita se as dependencias nao mudaram: ```typescript const filteredItems = useMemo( () => items.filter(item => item.category === selectedCategory), [items, selectedCategory] ); ``` **Quando NAO usar**: para calculos triviais. Criar um objeto simples ou concatenar strings nao justifica o overhead cognitivo. Em entrevistas, um sinal de senioridade e dizer: "eu mediria primeiro com o React DevTools Profiler antes de adicionar useMemo". ## useCallback: Estabilizando Referencias de Funcoes `useCallback` retorna uma funcao memorizada. O caso de uso classico e quando voce passa um callback para um componente filho envolto em React.memo — sem useCallback, a funcao e recriada a cada render e o memo do filho nao funciona. **A armadilha**: useCallback sozinho nao evita re-renders. Ele so faz sentido em conjunto com React.memo ou quando a funcao e dependencia de outro useMemo ou useEffect. Usar useCallback indiscriminadamente e um anti-pattern comum. ## Code Splitting e Lazy Loading `React.lazy` e `Suspense` permitem carregar componentes sob demanda: ```typescript const HeavyDashboard = React.lazy(() => import('./HeavyDashboard')); function App() { return ( }> ); } ``` Em entrevistas de Big Tech, esperam que voce saiba quando fazer code splitting: rotas, features que nao sao usadas imediatamente, e dependencias grandes carregadas somente quando necessario. ## Virtualizacao: Listas de Milhares de Itens Nenhuma quantidade de React.memo resolve uma lista de 50.000 itens renderizados no DOM. A solucao e virtualizacao: renderizar apenas os itens visiveis na viewport. `react-window` implementa essa tecnica e aparece frequentemente em system design de interfaces — como voce construiria um feed de noticias infinito, uma tabela com milhares de linhas, ou um chat com historico longo. ## Web Vitals e o Impacto das Otimizacoes React Core Web Vitals (LCP, INP, CLS) sao as metricas que o Google usa para ranquear paginas. **LCP (Largest Contentful Paint)**: code splitting reduz o bundle inicial e melhora LCP. **INP (Interaction to Next Paint)**: handlers lentos e re-renders pesados bloqueiam o thread principal. `useTransition` (React 18) permite marcar atualizacoes de estado como nao-urgentes, mantendo a UI responsiva. **CLS (Cumulative Layout Shift)**: usar skeletons com dimensoes definidas previne layout shifts. Conhecer essas metricas e saber como as tecnicas React as afetam demonstra que voce pensa em produto, nao so em codigo. ## Como Se Preparar para Essas Entrevistas A melhor preparacao e trabalhar em aplicacoes reais com problemas reais de performance. Use o React DevTools Profiler para identificar re-renders desnecessarios. Use o Chrome DevTools Performance tab para identificar long tasks. Plataformas como o **VagaNaGringa.dev** sao uteis para encontrar vagas de frontend senior em empresas internacionais e entender quais tecnologias e niveis de profundidade estao sendo pedidos. ## Conclusao Performance em React nao e sobre memorizar APIs. E sobre ter um modelo mental claro de como o React funciona, saber medir antes de otimizar, e conhecer as ferramentas certas para cada problema. Candidatos que demonstram esse raciocinio em entrevistas se destacam naturalmente em processos seletivos de empresas internacionais.