Multiple choice practice

React MCQ questions

Take a short practice test with instant feedback, then revise every question with its answer and the reason behind it.

React tutorial Interview questions

Questions: 136
From lessons: 116
Your last test: —

Practice test

React practice testMultiple choice Question 1 of 10

Which React Router hook reads :id from /products/:id?

Score so far: 0/0

All questions with answers

What does JSX compile to?
- AHTML strings
- BReact.createElement / jsx() calls
- CWeb Components
- DTemplate literals
Show answer
Answer: B. React.createElement / jsx() calls
JSX is syntax sugar for function calls that create React elements.
Which attribute sets a CSS class in JSX?
- Aclass
- BclassName
- CcssClass
- DstyleClass
Show answer
Answer: B. className
class is a reserved word in JavaScript, so JSX uses className.
What must a component name start with?
- AA lowercase letter
- BAn uppercase letter
- Cuse
- DAn underscore
Show answer
Answer: B. An uppercase letter
Lowercase tags are treated as HTML elements.
What is wrong with this handler?
TSX Illustrative
```
1<button onClick={save()}>Save</button>
```
- ANothing
- Bsave runs during render instead of on click
- ConClick must be lowercase
- DButtons cannot have handlers
Show answer
Answer: B. save runs during render instead of on click
Pass the function itself: onClick={save} or onClick={() => save(id)}.
Props are…
- AMutable by the child
- BRead-only inputs from the parent
- CPrivate state
- DGlobal variables
Show answer
Answer: B. Read-only inputs from the parent
A component must never modify its props.
What does useState return?
- AThe state value only
- BA pair: the value and a setter
- CA ref object
- DA promise
Show answer
Answer: B. A pair: the value and a setter
const [value, setValue] = useState(initial).
When does an effect with an empty dependency array run?
- AOn every render
- BAfter the first render (and cleanup on unmount)
- CNever
- DBefore the first render
Show answer
Answer: B. After the first render (and cleanup on unmount)
[] means the effect has no dependencies, so it runs once after mounting.
What renders when count is 0?
TSX Illustrative
```
1{count && <span>{count} new</span>}
```
- ANothing
- B0
- Cfalse
- DAn error
Show answer
Answer: B. 0
0 is a valid child and is rendered. Use count > 0 && … instead.
Which hook gives a mutable value that does not trigger re-renders?
- AuseState
- BuseMemo
- CuseRef
- DuseReducer
Show answer
Answer: C. useRef
Changing ref.current does not re-render the component.
What is the best key for list items?
- AThe array index
- BMath.random()
- CA stable unique id from the data
- DThe item text
Show answer
Answer: C. A stable unique id from the data
Stable ids let React match items between renders.
How do you update an object in state correctly?
- Auser.name = "Asha"; setUser(user)
- BsetUser({ ...user, name: "Asha" })
- Cuser.setName("Asha")
- DsetUser.name = "Asha"
Show answer
Answer: B. setUser({ ...user, name: "Asha" })
Create a new object so React sees a new reference.
Which hook reads a context value?
- AuseProvider
- BuseContext
- CuseStore
- DuseGlobal
Show answer
Answer: B. useContext
useContext(MyContext) returns the nearest provider’s value.
What does React.memo do?
- ACaches API responses
- BSkips re-rendering when props are shallowly equal
- CMemoises a value inside a component
- DStores state in localStorage
Show answer
Answer: B. Skips re-rendering when props are shallowly equal
It wraps a component; useMemo memoises values inside one.
Which hook memoises a callback function?
- AuseMemo
- BuseCallback
- CuseRef
- DuseEffect
Show answer
Answer: B. useCallback
useCallback(fn, deps) returns the same function until deps change.
What is a controlled input?
- AAn input with a ref
- BAn input whose value comes from state and updates via onChange
- CAn input with the required attribute
- DAn input inside a form
Show answer
Answer: B. An input whose value comes from state and updates via onChange
React state is the single source of truth for its value.
Which component catches errors thrown while rendering its children?
- AA Suspense boundary
- BAn error boundary
- CA Fragment
- DStrictMode
Show answer
Answer: B. An error boundary
Error boundaries are class components with getDerivedStateFromError or componentDidCatch.
Which React Router hook reads :id from /products/:id?
- AuseLocation
- BuseParams
- CuseRoute
- DuseQuery
Show answer
Answer: B. useParams
useParams returns an object of URL parameters.

What is count after add() runs once?

TSX Illustrative

1const [count, setCount] = useState(0);
2const add = () => { setCount(count + 1); setCount(count + 1); };
3// after add() runs once, count is…

Show answer

Answer: A. 1

Both calls read the same count (0) from this render, so the state becomes 1.

What does <Suspense fallback={…}> show?
- AErrors
- BThe fallback while lazy children are loading
- CA loading bar always
- DNothing in production
Show answer
Answer: B. The fallback while lazy children are loading
Suspense displays the fallback until lazy components or suspending data are ready.
Which command creates a production build in a Vite React app?
- Anpm start
- Bnpm run build
- Cnpm run dev
- Dvite serve
Show answer
Answer: B. npm run build
vite build outputs optimised static files into dist/.
count starts at 0. What is it after one click?
JSX Illustrative
```
1<button onClick={() => {
2  setCount(count + 1);
3  setCount(count + 1);
4}}>Add</button>
```
- A0
- B1
- C2
- DIt throws an error
Show answer
Answer: B. 1
Both calls read count from the same render (0), so both set it to 1. Use setCount(c => c + 1) to get 2.
From the lesson: useState
Calling items.push(newItem) and then setItems(items) reliably updates the UI.
- ATrue
- BFalse
Show answer
Answer: B. False
The array reference has not changed, so React may skip the update. Create a new array: setItems([...items, newItem]).
From the lesson: useState
When does an effect with an empty dependency array [] run?
- AAfter every render
- BOnly after the first render (and again in dev Strict Mode)
- CNever
- DBefore the first render
Show answer
Answer: B. Only after the first render (and again in dev Strict Mode)
An empty array means no reactive dependencies, so it runs after mount. Strict Mode intentionally mounts twice in development.
From the lesson: useEffect
Why does this component render forever?
JSX Illustrative
```
1const [count, setCount] = useState(0);
2useEffect(() => {
3  setCount(count + 1);
4}, [count]);
```
- AuseEffect cannot call setState
- BThe effect updates count, which is its own dependency, so it re-runs endlessly
- Ccount must be a ref
- DThe dependency array should be omitted
Show answer
Answer: B. The effect updates count, which is its own dependency, so it re-runs endlessly
Each run changes count, which triggers another run. Usually the fix is to remove the effect and update count in an event handler.
From the lesson: useEffect
You need useEffect to calculate a filtered list from props.
- ATrue
- BFalse
Show answer
Answer: B. False
Compute it during render (wrapping in useMemo only if it is genuinely expensive).
From the lesson: useEffect