JobsPing

React interview practice

Covers hooks, rendering, state management, performance, Server Components. Questions are written for real interviews at junior, mid and senior level.

Start a React practice test

15 multiple-choice questions · 15 minutes · instant score with explanations

Sample React interview questions

Three questions from the bank, with answers. The practice test draws different ones each time.

Question 1 · forms · mid

What is the difference between a controlled and an uncontrolled input?

  1. A.Controlled inputs cannot be typed into
  2. B.Controlled inputs only work inside a <form>
  3. C.A controlled input's value comes from React state via value/onChange; an uncontrolled input keeps its own value in the DOM, read via a ref or form data
  4. D.Uncontrolled inputs are deprecated in React 18
Show answer

C. A controlled input's value comes from React state via value/onChange; an uncontrolled input keeps its own value in the DOM, read via a ref or form data

Controlled inputs make React state the single source of truth. Uncontrolled inputs use defaultValue and are read when needed, which is simpler for basic forms.

Question 2 · rendering · mid

Why are stable keys important when rendering a list?

  1. A.Keys are required so items can be sorted alphabetically
  2. B.Keys let React match items between renders so state and DOM nodes stay attached to the right item
  3. C.Keys make React render lists faster by skipping diffing entirely
  4. D.Keys are only needed for lists longer than 100 items
Show answer

B. Keys let React match items between renders so state and DOM nodes stay attached to the right item

React uses keys to work out which item is which between renders. Using the array index as the key on a list that reorders can attach input state to the wrong row.

Question 3 · state · mid

What is logged after one click?

const [n, setN] = useState(0)
function onClick() {
  setN(n + 1)
  setN(n + 1)
  console.log(n)
}
  1. A.2, and n becomes 2
  2. B.0, and n becomes 1
  3. C.0, and n becomes 2
  4. D.1, and n becomes 2
Show answer

B. 0, and n becomes 1

State is a snapshot for the current render: both calls compute 0 + 1, and the log still shows 0. Use the updater form setN(prev => prev + 1) to increment twice.

Ready to apply? Browse remote React jobs →