Getting your questions ready
Getting your questions ready
Beat the crowd
10 questions No timer
50 free React JS trivia questions with answers — trivia quiz, new questions added Aug 2026.
React started as an internal experiment at Facebook and became the most widely used way to build user interfaces on the web, and later on phones through React Native. Its story runs through a famous licence fight, a rewrite of its rendering engine, the arrival of hooks and a hand-off to an independent foundation. This quiz covers what a working developer meets every day: JSX and why it looks the way it does, how components pass data and hold state, the hooks that replaced class lifecycles, the virtual DOM and how React decides what to repaint, plus the tooling around it, from state libraries and routing to Next.js and the React Native runtime. It suits anyone who has shipped a React app, bootcamp graduates revising for interviews, and teams who want a round for a developer meetup. Every answer comes with a short explanation and a source, so the quiz doubles as a refresher.
30 of 50 questions with answers and explanations. Play the quiz
Q 01Why does JSX make React developers write className rather than HTML's class attribute?
It is reserved in JavaScript
It is reserved in JavaScript, so React names the prop after the DOM property className instead; the same clash turns the label attribute for into htmlFor.
Q 02Which pencil-and-paper game does the official React tutorial build, finishing with a 'time travel' move history?
Tic-tac-toe
Tic-tac-toe is the tutorial's project, and its final step stores every board in a history array so a player can jump back to any earlier move.
Q 03What does React's Strict Mode do to each component function in development to flush out impure code?
Calls it twice
Strict Mode calls it twice and discards one result, so a component whose output differs between the two runs is caught in development, where production would only run it once.
Q 04Which deliberately alarming prop name does React require for injecting a raw HTML string into an element?
dangerouslySetInnerHTML
dangerouslySetInnerHTML takes an object shaped { __html: '...' } rather than a plain string, a second speed bump on top of the scary name before markup bypasses React's escaping.
Q 05Which four-word motto did Facebook give React Native in 2015, pointedly rejecting Java's cross-platform promise?
Learn once, write anywhere
Learn once, write anywhere was the pitch: the launch post said Facebook was not chasing "write once, run anywhere", because each platform deserves its own app built by the same engineers.
Q 06Under which open-source umbrella body did Meta say in October 2025 it would place React and React Native?
Linux Foundation
The Linux Foundation now hosts the React Foundation, which formally launched on 24 February 2026 with Meta contributing the project amid concerns about a single vendor's dominance.
Q 07Which ageing browser did React 18 stop supporting when it shipped in March 2022 with automatic batching?
Internet Explorer 11
Internet Explorer 11 was cut loose because React 18's features lean on modern browser capabilities that cannot be polyfilled well, and Microsoft retired the browser itself that June.
Q 08What did Mark Zuckerberg call 'the biggest mistake we made as a company' in 2012, pushing Facebook toward native apps?
Betting too much on HTML5
Betting too much on HTML5 was the regret: Facebook's HTML5 mobile app had been slow and unstable, and the fix became React Native, born from an internal hackathon on Jordan Walke's prototype.
Q 09Which hook, available since 16.8, returns a two-element array holding a value and the function that updates it?
useState
useState returns exactly two values, the current state and a setter, and calling the setter schedules a re-render with the new value rather than mutating anything in place.
Q 10Which hook runs after render to handle side effects such as data fetching, optionally returning a cleanup function?
useEffect
useEffect is one of the two most-used hooks; its dependency array decides when it re-runs, and an empty array makes it fire only once after the first mount.
Q 11What does React call the values a parent passes a child via JSX attributes, which the child may read but not alter?
props
Props are read-only snapshots: each render receives a fresh set, and a child that needs a different value must ask its parent to pass a new one rather than mutating them.
Q 12Which prop must every item in a React-rendered list carry so that reordered or deleted items are not mixed up?
key
A key lets React tell list items apart, which is why the console nags "Each child in a list should have a unique key prop" and why using the array index breaks when items move.
Q 13Since hooks arrived in 2019, which kind of component does the React documentation recommend for new code?
Function components
Q 21Which 2017 rewrite of React's renderer replaced the 'Stack' algorithm with work split into units spread across frames?
Fiber
Fiber shipped inside React 16 in September 2017 and changed nothing about how developers write components; it made animation smoother by letting rendering pause, resume and be prioritised.
Q 22Which React 16.0 addition catches exceptions in its child tree and shows fallback UI rather than crashing the app?
Error boundaries
As of React 19, error boundaries must still be class components using componentDidCatch or getDerivedStateFromError, which the docs list among the few remaining reasons to write a class.
Q 23Which React major release, in October 2020, was openly billed as adding 'no new features' for developers?
17
Function components won out once hooks let them hold state; the docs say class components are still supported but not recommended in new code.
Q 14Which open-source body declared React's BSD-plus-patents licence incompatible with its policies in 2017?
Apache Software Foundation
The Apache Software Foundation said the patent grant shifted risk onto downstream users; Facebook refused to budge in August 2017, then reversed and adopted MIT a month later.
Q 15Which React component, usually written as an empty tag pair, groups several children without adding a node to the DOM?
Fragment
Fragment exists because a component must return a single root, and before React 16 that meant wrapping siblings in a pointless div; fragments can also be keyed when produced from an array.
Q 16What does the React documentation call moving data two sibling components both need into their nearest common parent?
Lifting state up
Lifting state up is described as one of the most common things you do in React: the parent owns the value and hands it down, with callbacks letting children request changes.
Q 17What does React call a form input whose displayed value is driven by a state variable rather than by the DOM itself?
Controlled
A controlled input takes value or checked from state plus an onChange handler, so React re-renders on every keystroke, while an uncontrolled one uses defaultValue and lets the DOM keep its own copy.
Q 18Which hook reads a value supplied by the nearest matching Provider above a component, sidestepping 'prop drilling'?
useContext
useContext subscribes a component to context from the closest provider above it, falling back to the default passed to createContext when no provider exists.
Q 19Which hook stores a mutable .current value that survives re-renders yet, when changed, does not trigger one?
useRef
useRef is the escape hatch for things React should not watch, such as a DOM node, a timer id or a previous value, because writing to ref.current never causes a re-render.
Q 20What does React call diffing a freshly rendered virtual DOM against the previous one and patching only the changes?
Reconciliation
Reconciliation is what lets developers write code as if the whole page re-renders on every change while React touches only the DOM nodes that actually differ.
17 was a stepping stone: its point was letting two versions of React coexist on one page so huge apps could upgrade gradually, and it moved event delegation from the document to the root.
Q 24Which major version number did React jump to in April 2016, abandoning the 0.x numbering it had used since launch?
15
15 followed 0.14 directly, the team explaining that major versions signalled React had long been in production at Facebook and that semver would be followed as it had since 2013.
Q 25Which release, in October 2015, split browser rendering out of the main package into the separate react-dom library?
0.14
0.14 made the split so React could target more than browsers, a design that let React Native share the core; the same release also introduced stateless function components.
Q 26Which class lifecycle method, run once a component is in the DOM, is the classic place to start a data fetch?
componentDidMount
componentDidMount fires after the first render hits the DOM, so network requests started there cannot delay the initial paint; its mirror, componentWillUnmount, is where timers and listeners get cleared.
Q 27React 16.3 flagged componentWillMount and two sibling lifecycle methods as legacy by adding which prefix to their names?
UNSAFE_
UNSAFE_ was chosen because those methods encourage patterns that break under async rendering; the old names still run with a deprecation warning, and React says only the prefixed names will work in a future major version.
Q 28React 18 replaced ReactDOM.render with which new API, imported from react-dom, to mount an app and unlock its features?
createRoot
createRoot is imported from a new react-dom sub-path, and apps that keep calling the legacy render API stay in React 17 behaviour and get a deprecation warning.
Q 29Which React component shows a fallback such as a spinner while the components nested inside it are still loading?
Suspense
Suspense first shipped in React 16.6 for code-split components and grew in React 18 to cover server rendering, so a slow section can stream in after the rest of the page.
Q 30Which React 16.6 function defers loading a component's code until its first render, enabling code splitting?
lazy
lazy wraps a dynamic import() so the chunk is fetched on first render, and it arrived in the same 16.6 release as memo, which gave function components a PureComponent-style bail-out.