Live Coding React em Entrevistas

Lições destiladas da sessão de live coding na entrevista com a Jalasoft (52 minutos). O exercício era implementar um componente de paginação em React: 42 usuários, pageSize 5, navegação por número de página, highlight da página ativa, botões anterior/próximo desabilitados nas bordas. Relacionadas: entrevista-metodo-star · entrevista-pitch-historias

O Que é Avaliado no Live Coding

Além de você chegar a uma solução funcional, os entrevistadores observam:

Como você lê o enunciado — você entende os requisitos antes de codar?
Como você comunica — você narra o raciocínio enquanto escreve?
Estrutura de componentes — você decompose bem?
Uso de hooks — useState, useMemo, useCallback no lugar certo?
Código limpo — nomeação de variáveis, extração de lógica, legibilidade.
Como você lida com edge cases — primeira página, última página, página inválida.

Regras Comuns

O que é permitido	O que NÃO é permitido
Googlar a documentação	Pedir para IA gerar o código
Consultar MDN, React Docs	Usar bibliotecas externas de estado (Redux, Zustand)
Raciocinar em voz alta	Ficar em silêncio sem comunicar

⚠️ Eles pedem que você não use IA para gerar o código. Isso não impede de você saber como a IA geraria — mas a execução precisa ser sua.

Como Estruturar a Solução

Para o exercício de paginação, a estrutura natural é:

<PaginationExercise />
  ├── <UserList users={currentPageUsers} />   // renderiza a lista/tabela
  └── <Pagination                             // controla navegação
        totalPages={totalPages}
        currentPage={currentPage}
        onPageChange={setCurrentPage}
      />

Estado necessário:

currentPage (número da página atual)
A lista de usuários pode vir como prop ou mock local

Lógica derivada (não precisa de estado):

totalPages = Math.ceil(users.length / pageSize)
currentPageUsers = users.slice(startIndex, endIndex)
isPrevDisabled = currentPage === 1
isNextDisabled = currentPage === totalPages

Dicas de Comportamento Durante a Sessão

Leia o enunciado completo antes de codar. Identifique todos os requisitos (highlight, disabled, navegação por número).
Declare a estrutura antes de implementar. Escreva os componentes vazios e os estados necessários antes de preencher a lógica.
Fale enquanto escreve. “Vou criar um state para a página atual, e derivar os usuários da página com slice…”
Pergunte se tiver dúvida. “A listagem deve ser uma tabela ou um list? Qualquer um está OK?”
Não entre em pânico com erros. Leia o erro no console, raciocine em voz alta, corrija.

Armadilhas Comuns

Off-by-one: startIndex = (currentPage - 1) * pageSize, não currentPage * pageSize.
totalPages errado: Math.ceil garante a última página parcial.
Render ineficiente: use useMemo para derivar currentPageUsers se a lista for grande — mas em um exercício simples, não complique desnecessariamente.
Esqueceu o highlight: a página ativa deve ter estilo diferente. Verifique no enunciado.

Sobre Testing em Live Coding

Se perguntarem sobre testes:

Cypress para testes E2E e de integração — usado em produções onde o tempo de build de 20 minutos fazia o conjunto completo de testes.
Playwright para projetos onde Cypress não é suficiente ou há casos de uso mais avançados.
Em live coding, raramente pedem que você escreva testes — mas podem perguntar como você testaria o componente.

Relacionadas: entrevista-metodo-star · entrevista-pitch-historias · entrevista-qa