React Live Coding in Interviews

Lessons from a live coding session during an interview with Jalasoft (52 minutes). The exercise was to implement a pagination component in React: 42 users, pageSize 5, page number navigation, active page highlight, previous/next buttons disabled at the boundaries. Related: entrevista-metodo-star · entrevista-pitch-historias

What Is Evaluated in Live Coding

Beyond reaching a working solution, interviewers observe:

1. How you read the prompt — do you understand all requirements before coding?
2. How you communicate — do you narrate your reasoning while writing?
3. Component structure — do you decompose cleanly?
4. Hook usage — useState, useMemo, useCallback in the right places?
5. Clean code — variable naming, logic extraction, readability.
6. Edge case handling — first page, last page, invalid page.

Common Rules

⚠️ They ask you not to use AI to generate the code. That doesn’t prevent you from knowing how AI would generate it — but the execution must be yours.

How to Structure the Solution

For the pagination exercise, the natural structure is:

<PaginationExercise />
  ├── <UserList users={currentPageUsers} />   // renders the list/table
  └── <Pagination                             // controls navigation
        totalPages={totalPages}
        currentPage={currentPage}
        onPageChange={setCurrentPage}
      />

Required state:

• currentPage (the current page number)
• The user list can come as a prop or local mock

Derived logic (no state needed):

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

Behavioral Tips During the Session

• Read the full prompt before coding. Identify all requirements (highlight, disabled buttons, number navigation).
• Declare the structure before implementing. Write empty components and the required states before filling in the logic.
• Talk while you write. “I’m going to create a state for the current page, and derive the page users with slice…”
• Ask if in doubt. “Should the listing be a table or a list? Is either fine?”
• Don’t panic at errors. Read the console error, reason out loud, fix it.

Common Pitfalls

• Off-by-one: startIndex = (currentPage - 1) * pageSize, not currentPage * pageSize.
• Wrong totalPages: Math.ceil ensures the last partial page is counted.
• Inefficient render: use useMemo to derive currentPageUsers if the list is large — but in a simple exercise, don’t over-engineer.
• Forgot the highlight: the active page must have a distinct style. Double-check the prompt.

On Testing in Live Coding

If asked about testing:

• Cypress for E2E and integration tests — used in production environments where the full 20-minute test suite covered the entire system.
• Playwright for projects where Cypress is insufficient or where more advanced use cases apply.
• In live coding, they rarely ask you to write tests — but they may ask how you would test the component.

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