This React skills test guide is for hiring managers and recruiters assessing frontend engineers who work in React. It covers modern React only: function components, hooks and the React 19 changes. You'll get a skills matrix by level, 11 sample questions with what a strong answer covers, a formats comparison and a scoring rubric. The questions are separate from our React interview questions, so a candidate won't see the same prompt twice.
What a React skills test should measure
React depends on solid JavaScript, so for junior roles consider pairing this with the JavaScript skills test. If the app is built on a framework such as Next.js, add a question or two on its routing and data loading.
Sample React test questions
Questions are labeled by level and format. Choose five to seven, and include at least one debugging question; that is where React experience shows most.
1. What is the difference between useState(buildRows()) and useState(() => buildRows())?
Junior, concept
What good looks like: the first calls buildRows on every render and throws the result away after the first one. The second passes an initializer function, which React calls only on the first render. It matters when the initial value is expensive, such as parsing saved data or building a large array.
2. Why does {items.length && <List items={items} />} show a 0 on the page when the list is empty?
Junior, debugging
What good looks like: && returns the left side when it is falsy, and 0 is a number, which React renders. React skips only false, null and undefined. Write items.length > 0 && ... or use a ternary.
3. A timer uses useEffect(() => { const id = setInterval(() => setSeconds(seconds + 1), 1000); return () => clearInterval(id); }, []) and gets stuck at 1. Why?
Mid, debugging
What good looks like: the effect runs once, so the interval callback keeps the seconds value from the first render (0) and sets 1 on every tick. Use a functional update, setSeconds(s => s + 1), so the effect doesn't need to read seconds at all. Adding seconds to the dependencies also works but recreates the interval every second. The react-hooks/exhaustive-deps lint rule flags this.
4. A profile editor keeps the previous user's typed text when you switch users. Fix it without an effect.
Mid, practical
What good looks like: React keeps state for a component of the same type at the same place in the tree. Render it with key={userId}, so React treats each user as a new component and resets its state. An effect that clears state after render shows stale values for a frame and adds a second render.
5. When would you choose useReducer over useState?
Junior to mid, concept
What good looks like: when several related values change together, when the next state depends on the previous one in several ways, or when you want the update logic in one pure function you can test. The reducer takes the state and an action and returns new state without mutating. A strong answer notes that dispatch keeps the same identity between renders, so it can be passed down safely.
6. Write a useOnlineStatus custom hook. What does a custom hook share between components?
Mid, practical
What good looks like: subscribe to the window online and offline events, ideally through useSyncExternalStore(subscribe, () => navigator.onLine), which handles the subscription and consistent reads (pass a server snapshot for server rendering). Custom hooks share logic, not state: each component that calls one gets its own state. The name must start with use.
7. A rendering error in one widget blanks the whole page. How do you contain it?
Mid, concept
What good looks like: wrap the widget in an error boundary that shows a fallback. Error boundaries are still class components (using getDerivedStateFromError and componentDidCatch), and many teams use the react-error-boundary package. They don't catch errors in event handlers or async code such as timers, so handle those with try and catch plus state.
8. In React 19, how do you pass a ref into your own input component?
Mid to senior, concept
What good looks like: function components can now take ref as a regular prop: function TextInput({ ref, ...props }) { return <input ref={ref} {...props} />; }. forwardRef is no longer needed for new code, and React plans to deprecate it. Use useImperativeHandle only when you want to expose a narrow API, such as a focus method.
9. The console warns "Cannot update a component while rendering a different component." What causes it?
Mid, debugging
What good looks like: a child calls a parent's state setter during its own render, for example calling onChange(value) in the component body instead of in an event handler. Rendering must be pure. Move the call into the event that caused the change, or let the parent derive the value itself.
10. A teammate built a button from a <div onClick={...}>. What's missing?
Junior, practical
What good looks like: a real <button> gives keyboard focus, Enter and Space activation, the button role for screen readers and disabled behavior for free. A div needs tabIndex, a role, key handlers and focus styles to match, and usually still misses something. Inside a form, use type="button" to avoid accidental submits.
11. A dashboard loads in a waterfall: the layout fetches the user, then a child fetches the team, then a grandchild fetches reports. How do you fix it?
Senior, practical scenario
What good looks like: each request waits for its parent to render. Start independent requests together and as early as possible: at the route level (a framework loader or a Server Component), with Promise.all, or with a data library such as TanStack Query and prefetching. Keep requests in sequence only when one truly needs another's result, and check the network panel before and after.
Test formats compared
Debugging prompts like the stale interval are hard to answer by pattern matching, which makes them useful whatever format you choose. A work sample based on a real bug from your codebase is often the strongest final step.
Scoring rubric
Running a React test with NTRVSTA
React is one of the frameworks in NTRVSTA's exam library. The live AI interviewer runs the round in real time and adapts difficulty to each answer: a candidate who explains stale closures cleanly gets a data-loading or performance scenario next, while one who struggles gets a simpler question or a hint. It asks follow-ups about why, so you see whether someone understands rendering or just remembers patterns. Senior frontend candidates can take a system-design question on the interactive whiteboard.
Afterward, reviewers see a score breakdown (technical skills, English proficiency, communication), video snippets of key moments and a shareable report. Use our React interview questions for later rounds, look at the best coding assessment tools if you also want a code-execution test, and see the frontend developer interview questions for the wider role.
Questions
How long should a React assessment be?
Thirty to 45 minutes for a screen. If you add a take-home, keep it to a small feature in a starter repo that already builds, so candidates spend time on React rather than setup.
Should a React skills test allow AI coding assistants?
If your team uses them, allow them in a take-home but follow up live: ask the candidate to explain a choice and change the code. In a reasoning round, ask candidates to answer without them so you hear their own understanding.
Should the test cover class components?
Mostly no. New React code uses function components and hooks. The exception is error boundaries, which are still classes, and older codebases you maintain; if yours has many class components, add one question on them.
Want to see a React screen run by an adaptive AI interviewer? Book a 20-minute demo, or try a sample interview.
