React JS Trivia
0Loading crowd target
0Loading crowd target
6correct to beat the crowd
100 free React JS trivia questions with answers — trivia quiz, new questions added Oct 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 100 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 hosts the React Foundation, which formally launched on 24 February 2026, when React, React Native and JSX stopped being owned by Meta.
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 rebuilt its web-based mobile apps natively, and React Native began the next summer as a hackathon project to bring web-style development to native apps.
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 sync a component with outside systems such as a server, optionally returning a cleanup function?
useEffect
useEffect re-runs whenever a value in its dependency array changes, so an empty array makes it fire only after the first mount, and leaving the array out makes it run after every render.
Q 11Which Facebook engineer created React, starting with a side project he called FaxJS?
Jordan Walke
Jordan Walke built FaxJS to fix the growing tangle of Facebook's older Bolt framework, and the experiment's core ideas survived into the React that was open-sourced in 2013.
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 core algorithm replaced the 'Stack' version with work split into units spread across frames?
Fiber
Fiber shipped inside React 16 in September 2017 without changing how developers write components; its point was letting React pause work, come back to it later and give different updates different priorities.
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 reasoned that if a major version number signals stability in production, React 'got there a long time ago', so it simply moved the 0 out of the way.
Q 25Which newly acquired Facebook company adopted React for its website in 2012, a year before the library was open-sourced?
Instagram used none of Facebook's infrastructure, so React had to be decoupled from it first, and that job became the forcing function for releasing the library to everyone in 2013.
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 delays loading a component's code until its first render, enabling code splitting?
lazy
lazy wraps a dynamic import() so a component's chunk is fetched only when it first renders, which keeps rarely visited screens out of the initial bundle.