How to Structure React Code Under Time Pressure

How to Structure React Code Under Time Pressure

Structuring code in a time-limited interview is different from a real project. You have to balance speed and quality. Here is how to do it well.

Start Simple, Refactor If It Helps

Begin with a simple, working structure. Refactor only when it directly helps you build the next feature faster. Do not pre-structure for an imagined future in a 90-minute round.

Split by Visible Component

Split components where the UI has visible boundaries: header, sidebar, list, modal. Visible splits are easy to reason about and help you keep state in the right place.

Keep State Local Initially

Start with local state in components. Lift to Context or a parent only when multiple components need the same data. Do not reach for global state up front.

Avoid Premature Abstraction

Do not extract a hook or component until you see real duplication. Premature abstraction in a time-limited round costs time you do not have.

One File Is Often Fine

In a short interview, putting everything in a few files is fine. Do not over-split into a full folder structure. Clarity beats architectural purity under time pressure.

Name Things Clearly

Clear names are worth more than elaborate structure. A component called VideoList is clearer than a clever abstraction. Clear names make your code easier to extend and read when you go back to fix bugs.

The Takeaway

Under time pressure, start simple, split by visible component, keep state local initially, avoid premature abstraction, and prefer clear names over elaborate structure. A working app beats a well-architected half-built one.