Interviews
A useful React interview asks how the candidate splits state, effects, and rendering, then watches them change a component while explaining the render. The questions below are for a junior, a mid-level engineer, and a senior. Each one says what a good answer covers. After the conversation, watch the candidate code.
A junior answer names the rule and the bug it prevents.
It should describe the same UI. A component is a function of props and state. Side effects belong in an event handler or an effect, not in the render body. A render that fetches or writes a global will repeat that work.
The key tells React which item is which across renders. Use a stable id from the data. The index attaches state to a position, so a reorder, insert, or filter can show one row's state on another row.
Props come from the parent. The child reads them and does not assign to them. State is data the component owns and changes with its setter. When two children must share a value, the parent owns it and passes it down.
useEffect usually runs after the browser paints the render that scheduled it. The dependency list is the set of values the effect closes over. An empty list keeps the values from the first render. Leave out a value the effect reads and that value goes stale.
A controlled input takes its displayed value from state and writes changes through onChange. An uncontrolled input keeps the value in the DOM, and you read it with a ref when you need it. Use a controlled input when the screen validates or transforms as the person types.
An unconditional setter during render schedules another render, which calls the setter again. Update state in an event handler or an effect. When a value is derived from props, compute it during render instead of storing a second copy.
A mid-level answer names the mechanism and a failure mode.
Write one when a memoized child would rerender because it received a new function or object, or when a calculation is expensive enough to measure. A compiler that inserts memoization can make the manual call redundant. Wrapping every value does not make a component faster.
Give the subtree a key that changes with the record, such as an id. React unmounts the old tree and mounts a new one, so its state starts clean. An effect that copies props into state is easier to leave one render behind.
It compares the new element tree with the previous one by type and, among siblings, by key. The same type and key update in place. A different type or key unmounts and mounts. It does not match every DOM node against every other node.
An effect synchronizes React with something it does not own: a subscription, a timer, or a widget. A click or a submit belongs in the handler. Fetching because an id prop changed is synchronization. Fetching because the person clicked is the handler.
Consumers rerender when the context value changes. An object created during the provider's render is a new value every time, even when the fields are the same. Split values that change on different schedules, and pass a stable value when the inputs have not changed.
The effect captured variables from the render that created it. If a variable it reads is missing from the dependency list, later renders do not update the effect, and it keeps the old value. List every reactive value it reads, or restructure so it does not need them.
A senior answer names the tradeoff, the failure, and what to measure.
In a React Server Components setup, a client module and the modules it imports ship to the browser. A server component can render a client component and pass props that can be serialized. Keep document, window, and other browser APIs inside the client module. Importing that module into a server module pulls it across.
Prefer a union of variants over a set of booleans that can be true together when the product forbids that. Make the props the component needs required. The parent owns a side effect and passes a callback. A prop that means two things will be set wrong.
The subscription, timer, or request outlives the unmount, and the next run adds another. Return a cleanup that removes the exact subscription that run created. Ignore a response that resolves after the cleanup, or it will apply a result to a screen that has moved on.
Render the rows near the viewport, plus a small overscan. That is windowing. Pagination is the simpler cut when one long scroll is not required. The scroll container needs a bounded height. Measure before adding a library.
startTransition marks the update as interruptible. React can keep showing the previous screen while it prepares the next one, and it can drop a slow transition if a newer update arrives. Urgent input can stay responsive. It does not mean every component renders twice.
Render the loading state, the success payload, and the error, and assert the screen. Replace the boundary the component calls, not React's internals. A test that only checks that a mock was called does not show what the person using the screen sees.
These questions show how a candidate talks about React. They do not show the candidate writing the next change with no assistant. How to tell if a developer can code without AI explains the watched session.
What the candidate shows us is proctored tests, watched by a real person: a coding test with no AI allowed, a 2-hour build project with AI allowed, the Fire Drill (a live pair-programming session on a real-world problem), an English test, a thinking-skills test and a typing test. It also covers recorded reference checks. The menu is on Proctored tests. You pay for the tests you order. A real person watches.
When the answers are strong, Hire frontend developers. Arca.ph is a network of remote engineers. Your own AI agent, such as Grok, Claude, or ChatGPT, searches and sorts that network. On the marketplace, the fee is a one-time 15% fee of first-year pay, only on hire, with a 3-month free replacement. Done for you is 35% of first-year pay, charged once on hire. Details are on pricing and how it works.
Data, errors, the GIL, and what a good Python answer covers at each level.
Values, types, and the event loop, with what a good answer covers at each level.
The event loop, APIs, and failures, with what a good Node.js answer covers at each level.
Types, concurrency, and failure, with what a good Java answer covers at each level.
Ask two or three questions from the level you are hiring, then ask what would break. A useful interview is a conversation about a real constraint. It is not a recital of every question on this page. Use the watched coding check before you decide to hire.
A junior answer names the rule and the common bug. A mid-level answer names the mechanism and one failure mode. A senior answer names a tradeoff, a failure they have seen, and what they would measure. Hire for the work the role will own, not for a perfect score on every question.
Questions do not show the candidate writing code. What the candidate shows us is proctored tests, watched by a real person: a coding test with no AI allowed, a 2-hour build project with AI allowed, the Fire Drill (a live pair-programming session on a real-world problem), an English test, a thinking-skills test and a typing test. It also covers recorded reference checks. The guide How to tell if a developer can code without AI explains the watched session.
Open the frontend developer hire page linked on this page. React and TypeScript are stacks listed for that role. Your own AI agent searches and sorts the Arca.ph network. You choose who to test and who to interview. Profiles are free to view once you sign up and sign the Arca.ph Client Agreement.
Arca.ph is a network of remote engineers. Your own AI agent, such as Grok, Claude, or ChatGPT, searches and sorts that network. On the marketplace, the fee is a one-time 15% fee of first-year pay, only on hire, with a 3-month free replacement. Done for you is 35% of first-year pay, charged once on hire.
Profiles are free to view once you sign up and sign the Arca.ph Client Agreement.