100 Fun Facts About React JS

Why does JSX make React developers write className rather than HTML's class attribute?

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.

Which pencil-and-paper game does the official React tutorial build, finishing with a 'time travel' move history?

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.

What does React's Strict Mode do to each component function in development to flush out impure code?

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.

Which deliberately alarming prop name does React require for injecting a raw HTML string into an element?

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.

Which four-word motto did Facebook give React Native in 2015, pointedly rejecting Java's cross-platform promise?

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.

Under which open-source umbrella body did Meta say in October 2025 it would place React and React Native?

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.

Which ageing browser did React 18 stop supporting when it shipped in March 2022 with automatic batching?

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.

What did Mark Zuckerberg call 'the biggest mistake we made as a company' in 2012, pushing Facebook toward native apps?

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.

Which hook, available since 16.8, returns a two-element array holding a value and the function that updates it?

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.

Which hook runs after render to sync a component with outside systems such as a server, optionally returning a cleanup function?

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.

Which Facebook engineer created React, starting with a side project he called FaxJS?

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.

Which prop must every item in a React-rendered list carry so that reordered or deleted items are not mixed up?

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.

Since hooks arrived in 2019, which kind of component does the React documentation recommend for new code?

Function components won out once hooks let them hold state; the docs say class components are still supported but not recommended in new code.

Which open-source body declared React's BSD-plus-patents licence incompatible with its policies in 2017?

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.

Which React component, usually written as an empty tag pair, groups several children without adding a node to the DOM?

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.

What does the React documentation call moving data two sibling components both need into their nearest common parent?

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.

What does React call a form input whose displayed value is driven by a state variable rather than by the DOM itself?

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.

Which hook reads a value supplied by the nearest matching Provider above a component, sidestepping 'prop drilling'?

useContext subscribes a component to context from the closest provider above it, falling back to the default passed to createContext when no provider exists.

Which hook stores a mutable .current value that survives re-renders yet, when changed, does not trigger one?

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.

What does React call diffing a freshly rendered virtual DOM against the previous one and patching only the changes?

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.

Which 2017 rewrite of React's core algorithm replaced the 'Stack' version with work split into units spread across frames?

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.

Which React 16.0 addition catches exceptions in its child tree and shows fallback UI rather than crashing the app?

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.

Which React major release, in October 2020, was openly billed as adding 'no new features' for developers?

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.

Which major version number did React jump to in April 2016, abandoning the 0.x numbering it had used since launch?

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.

Which 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.

Which class lifecycle method, run once a component is in the DOM, is the classic place to start a data fetch?

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.

React 16.3 flagged componentWillMount and two sibling lifecycle methods as legacy by adding which prefix to their names?

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.

React 18 replaced ReactDOM.render with which new API, imported from react-dom, to mount an app and unlock its features?

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.

Which React component shows a fallback such as a spinner while the components nested inside it are still loading?

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.

Which React 16.6 function delays loading a component's code until its first render, enabling code splitting?

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.

React 18's headline under-the-hood change, letting React interrupt, pause and resume rendering work, is called what?

Concurrency in React 18 is opt-in, switched on only when a feature such as a transition is used, and it underpins transitions and streaming server rendering.

What does React 19 call functions using async transitions that manage pending state, errors and optimistic updates?

Actions were the headline of React 19 in December 2024, arriving with useActionState, useOptimistic and form elements that accept a function as their action prop.

Which wrapper function did React 19 make redundant by letting a function component take a ref as an ordinary prop?

forwardRef is slated for deprecation and removal, with a codemod to rewrite components, now that ref arrives in a function component's argument object like any other value.

The December 2025 'React2Shell' bug, scored a maximum CVSS 10.0, allowed remote code execution via which React feature?

Server Components were hit through the way React decoded payloads sent to Server Function endpoints; fixes landed in 19.0.1, 19.1.2 and 19.2.1, and even apps that defined no such endpoints could be exposed.

Which two-word directive at the top of a file marks a module as browser-side code in React's server-first model?

'use client' marks the module and everything it imports as client code, the only place state, effects and event handlers are allowed; its twin 'use server' exposes server functions.

Which optimisation does the React Compiler, open-sourced in 2024, apply automatically at build time, sparing developers from doing it by hand?

Memoization by hand meant wrapping code in useMemo and useCallback; the compiler now rewrites components at build time so they skip work when inputs have not changed, and version 1.0 shipped in October 2025.

Which JavaScript engine became React Native's default in version 0.70 of 2022, speeding up app start-up?

Hermes was built at Facebook for phones: it precompiles JavaScript to bytecode at build time, shaving start-up time and memory, and React Native has shipped with it on by default since 0.70.

Which Facebook business app, alongside Groups, was already running React Native in production when it was unveiled in 2015?

Ads Manager was React Native's first big job: the team had no engineers with iOS experience, and its Android version later became the first cross-platform React Native app.

In June 2024, which framework did the React Native team name as the only recommended community framework for new apps?

Expo won the endorsement when the React Native docs began steering newcomers to a framework rather than the bare CLI; the framework is free and open source, while Expo Application Services is an optional paid service.

In React Native, which two core components stand in for HTML's div and paragraph tags when laying out a screen?

View and Text map to UIView and UITextView on iOS and ViewGroup and TextView on Android; the docs describe View as a non-scrolling div, and every string must sit inside a Text.

Before its New Architecture, React Native shuttled batched messages between JavaScript and native code over what?

The bridge gave way to the JavaScript Interface, JSI, which lets JavaScript call native code synchronously; the New Architecture became the default in React Native 0.76 in October 2024.

Which state library did Dan Abramov and Andrew Clark build in 2015 around one store, the 'single source of truth'?

Redux began as Abramov's demo for a React Europe talk on hot reloading and time travel, and since mid-2016 it has been maintained by Mark Erikson and Tim Dorr rather than by its creators.

What does Dan Abramov's state library call the pure functions that compute the next state from the previous one?

Reducers work like the callback handed to an array's reduce method, folding each dispatched event into the running state, and they must stay pure: no mutating, no side effects.

Next.js 13 in October 2022 introduced which new routing system, built on nested layouts, that went stable in 13.4?

The App Router lives in an app directory that works beside the older pages directory, so a site can move across one route at a time; it was declared stable in May 2023.

Which company bought the team behind the Remix framework in October 2022, vowing it would stay open source?

Shopify took on co-founders Michael Jackson and Ryan Florence's team, and the Remix framework was later merged into their routing library's version 7 in November 2024 as 'Framework Mode'.

Which host bought Gatsby, the React static-site generator, in February 2023 and closed Gatsby Cloud that August?

Netlify's announcement led with Gatsby's Valhalla Content Hub, a data layer for composable sites, and it later folded Gatsby Cloud's hosting into its own platform.

Gatsby pulls Markdown and CMS content into React pages through which query language, begun at Facebook in 2012?

GraphQL lets the caller state the exact shape of data it wants and get JSON back in that shape; Facebook open-sourced the spec in 2015 and moved it to its own foundation in 2018.

Which testing framework, born at Facebook, had its ownership transferred to the OpenJS Foundation in May 2022?

Jest was one of the four projects Facebook relicensed to MIT alongside React in 2017, and the 2022 move handed control to its core team as an OpenJS 'Impact Project'.

At which conference in May 2013 did Facebook open-source React, two years after it first powered the News Feed?

JSConf US hosted the reveal under a permissive licence that Facebook swapped for BSD-plus-patents in October 2014, lighting the fuse on the later licensing row.

JSX was modelled on which earlier Facebook extension that brought XML-style component syntax to PHP?

XHP let PHP developers write HTML-like tags as first-class objects, and the same instinct, markup living inside the language rather than in separate templates, defines JSX.

React's own website sums the project up as 'the library for web and native' what?

User interfaces are all React takes on: routing and other client-side jobs are handed to separate libraries or to a full framework built on top of it.

Which Facebook software engineer created React, starting from a prototype he first called F-Bolt?

Jordan Walke and colleague Tom Occhino introduced it to outside developers in a 2013 conference talk titled 'JS Apps at Facebook'.

Which Facebook-owned product adopted React in 2012, the year after the News Feed first ran it?

Instagram, bought by Facebook that April for about $1 billion, had a website built entirely with React by the time the library went public the following year.

Which punctuation marks open what the React docs call a 'window to JavaScript' inside JSX markup?

Curly braces work in only two spots: as text directly inside a JSX tag, or immediately after the equals sign of an attribute.

What must a React component's name begin with so JSX does not mistake it for an HTML tag?

A capital letter is the whole signal: React reads a lowercase name such as section as an HTML tag, so a component called profile would not work.

In JSX, the style attribute expects which kind of JavaScript value in place of HTML's CSS string?

An object holds the styles, and its property names are written in camelCase, so the CSS property background-color becomes backgroundColor.

Which JavaScript operator is React's usual shortcut for showing JSX only when a condition is true?

&& hides a trap: put a number on its left side and a count of zero is printed on screen as a literal 0 instead of nothing.

Which JavaScript array method turns an array of data into an array of React components?

map is often chained after filter() in the docs, first narrowing a list of scientists to the chemists and then turning each one into a list item.

Which abbreviation names an app, a common React use, that loads one HTML page and never reloads it?

SPA is short for single-page application, yet React's glossary stressed that building one is optional: the library can also add interactivity to small parts of an existing website.

Which official starter tool from 2016 was deprecated in February 2025 for lack of maintainers?

Create React App bundled several tools into one recommended configuration when there was no clear way to start a project; newcomers are now steered towards frameworks.

The Rules of Hooks say React Hooks may be called only where, never inside loops or conditions?

At the top level, Hooks are called in the same order each time a component renders, which is how React keeps each one matched to its stored data.

Passing an empty array as a React Effect's dependencies makes the Effect run at which point?

Only on mount, when the component first appears, since nothing in an empty list can change; leave the array out altogether and the Effect runs after every render.

Which event method must a React form's submit handler call to stop the browser reloading the page?

preventDefault cancels the browser's built-in response for the few events that have one; the docs warn against confusing it with stopPropagation, which leaves that behaviour untouched.

Which file extension does TypeScript require for any React file that contains JSX markup?

.tsx exists because JSX's angle brackets clash with TypeScript's older angle-bracket type assertions, which are banned in those files in favour of the 'as' operator.

React supplies the R in the MERN web stack; which database supplies the M?

MongoDB joins Express, React and Node.js in MERN, a variation on the older MEAN stack in which Angular held the front-end slot.

Which compiler, built to make modern JavaScript run in older browsers, also converts React's JSX?

Babel was called 6to5 until a 2015 rename; its makers wanted to show the project was 'not born to die' once browsers supported the newer syntax.

Which build tool by Vue creator Evan You topped the React docs' 2025 list for building an app from scratch?

Vite takes its name from the French word for quick and is pronounced 'veet', a nod to its aim of a faster, leaner development experience.

Which programming style does React follow, describing each visual state instead of each step?

Declarative code is likened in the docs to taking a taxi: you tell the driver where you want to go instead of telling them exactly where to turn.

Which technique does the React team recommend over inheritance for reusing code between components?

Composition won out so fully that Facebook, with thousands of React components, said it had found no case where it would recommend an inheritance hierarchy.

Which three-dot JavaScript feature do the React docs suggest for copying state before changing it?

Spread syntax makes only a shallow copy, which keeps it fast but means a nested property needs the three dots more than once.

Which company, founded as ZEIT by Guillermo Rauch, maintains the React framework Next.js?

Vercel took its present name in April 2020 but kept the triangular logo; Rauch had earlier created the real-time communication library Socket.IO.

Which array method do the React docs say to avoid on state arrays because it mutates the original?

push sits in the docs' 'avoid' column beside pop, splice, sort and reverse, while the 'prefer' column holds methods that return a new array.

Which company's design language is implemented by MUI's open-source React component library?

Google developed the language, Material Design, in 2014 under the codename Quantum Paper, and the library that implements it is called Material UI.

What name is given to a React event travelling up the tree from a clicked button to its parents?

Bubbling is what almost every React event does; the exception is onScroll, which works only on the JSX tag it is attached to.

After a 2017 row over its patents clause, React 16 shipped under which open-source licence?

MIT terms arrived days after Facebook announced the switch, saying it did not want to 'hold back forward progress for nontechnical reasons'.

Which platform said in 2017 it would move its Gutenberg editor away from React over licence fears?

WordPress made its decision in the very month that Facebook backed down and relicensed React, which removed the reason to leave.

Which React function is called by hand, with a type and attributes, when a project cannot use JSX?

createElement is what JSX spares you: without the tag syntax, every element becomes a nested function call listing its type, attributes and contents.

What does React call rendering a modal or tooltip into a DOM node outside the parent component's?

A portal changes only the physical placement of the DOM node: in every other way its contents still behave as part of the React component that rendered them.

Which React pattern is a function that takes a component and returns a new one with extra behaviour?

Higher-order components are not part of the React API at all, just a pattern for reusing logic, and the docs note they are not commonly used in modern code.

What does React call attaching event handlers to HTML that was already rendered on the server?

Hydration only works when the first render in the browser matches the server's HTML: a mismatch can slow the page down or leave handlers attached to the wrong elements.

Which JSX attribute links a label to its input, standing in for the HTML attribute named 'for'?

htmlFor was not invented by React: it is the name browsers themselves give the label element's property that mirrors the HTML attribute.

Which React Hook fires before the browser repaints, letting a tooltip be measured and repositioned?

useLayoutEffect holds up the browser's repaint until it has finished, so the docs warn that it can hurt performance and say to prefer an ordinary Effect when possible.

React's useId Hook generates unique identifiers meant mainly for which kind of HTML attribute?

Accessibility attributes such as aria-describedby tie two tags together by a shared ID, and a hard-coded one breaks once a component is rendered more than once on a page.

Which React Hook returns an isPending flag and a function for marking a state update as non-urgent?

useTransition keeps a page responsive: a slow re-render it has marked can be interrupted, so the user can click away without waiting for it to complete.

Which adjective do React developers give the cross-browser event wrapper passed to every handler?

Synthetic events conform to the same standard as the browser's underlying DOM events but fix some inconsistencies between browsers.

Which React input prop fires on every keystroke, unlike the browser's native event of the same name?

onChange behaves in React like the browser's input event; the native change event on a text field does not fire until the control loses focus.

Which panel does React Developer Tools add beside Components for finding performance problems?

Profiler is also a component you can wrap around part of an app to time its renders in code, though each use adds some CPU and memory overhead.

Which React class method can return false to tell React that a re-render may be skipped?

shouldComponentUpdate exists only as a performance optimisation: if a component breaks without it, the docs say to fix that problem first.

Which React class method runs before a component is removed, a common place to cancel data fetching?

componentWillUnmount should mirror whatever was set up when the component first appeared: a subscription opened on arrival gets cleaned up here.

Which React Hook lets part of a page lag behind, showing stale search results while fresh ones load?

useDeferredValue needs no fixed delay, unlike debouncing or throttling, and the lagging re-render it schedules can be interrupted by the next keystroke.

Which lint rule in React's official Hooks plugin flags a dependency array that is missing a value?

exhaustive-deps most often fires when a developer tries to 'trick' React about its dependencies in order to control when an Effect runs.

Which name did React's creator give the early prototype he had first called F-Bolt?

FaxJS can still be read in its author's GitHub repository; the library it grew into went live on Facebook's News Feed in 2011.

Which React.createClass code-sharing feature did a 2016 React blog post brand 'Considered Harmful'?

Mixins were faulted on three counts as Facebook's codebase grew: implicit dependencies, name clashes and snowballing complexity.

Which React component hides its contents with display: none while preserving their state for later?

Activity lets a hidden tab keep a half-typed message in its textarea: when the boundary is shown again, React restores the previous state and re-creates its Effects.

Which React Hook adds a readable label to a custom Hook when it is viewed in React DevTools?

useDebugValue accepts a formatting function as a second argument, so potentially expensive formatting runs only when the component is actually inspected.

Which React release channel, added in 2023, lets frameworks adopt features before a stable release?

Canary releases copy what Meta had long done internally, running bleeding-edge React; frameworks are encouraged to bundle a version pinned to a particular commit.

Which feature, introduced in React Native 0.61, merged live reloading and hot reloading into one?

Fast Refresh replaced a hot-reloading feature that was not resilient to typos: it recovers gracefully after mistakes and falls back to a full reload when needed.

Which static type checker for JavaScript did Facebook release in 2014, writing most of it in OCaml?

Flow is opt-in, so a codebase need not be checked all at once, and it refuses to count null as a valid string or number, catching a classic source of crashes.

Which technique renders only the visible rows of a long React list, as react-virtualized does?

Windowing can dramatically cut both the time a long list takes to re-render and the number of DOM nodes created; Twitter built its own component for the job.

Which character must close an empty JSX tag such as img, though plain HTML lets it be left out?

A forward slash is compulsory because JSX is stricter than HTML: every tag must be explicitly closed, so even a line break or an image needs one.