What is React (and when you do not need it)

“What is React” has a short answer: React is a JavaScript library for building interfaces, maintained by Meta under the MIT licence and now at version 19.

What it does, what it leaves out

React handles rendering: it takes the state of a component, computes the tree to show and updates the DOM. It does not choose routes, does not fetch data and does not impose a styling system. Every missing piece becomes an explicit choice, with its own licence and its own upgrade cycle.

A minimal project

npm create vite@latest react-minimal -- --template react
cd react-minimal
npm install
npm run dev

Vite, released under the MIT licence, creates the project, installs React and starts the development server. The file src/App.jsx already holds a component with state: edit it and the page updates without a reload.

The boundary with libraries

• Routes: React Router is MIT and handles URLs, params and navigation; React alone does not know what an address is.
• Data: TanStack Query is MIT and takes care of cache, retry and loading state for you.
• Styling: Tailwind CSS is MIT; classes live in the markup and tokens in CSS variables.

The command node scripts/kw.js react, run on 31 October 2026 against the Stack Exchange API, returns 2,376 votes for the question “How can I programmatically navigate using React Router?” and 1,306 for “React-router URLs don't work when refreshing or writing manually”. Both numbers sit on the same boundary: navigation does not live in React, it lives in a package you choose, configure and upgrade.

Live records in the catalogue

Two React components in the catalogue show the model in practice: sidebar and dropdown-menu, both on Radix primitives under the MIT licence. To browse by category start from 111,985 components.

A concrete example: derived data

type Row = { id: string; title: string };

export function VisibleRows({ rows, query }: { rows: Row[]; query: string }) {
  const visible = rows.filter((row) =>
    row.title.toLowerCase().includes(query.toLowerCase()),
  );
  return (
    
      {visible.map((row) => (
        {row.title}
      ))}
    
  );
}

The filter is computed inside the render, from rows and query. There is no local state and no useEffect: when a prop changes, React calls the function again and the list stays a pure function of its input. An intermediate state here costs a second render and can fall behind the props.

When you do not need it

A content site, a blog or a landing page works better as generated HTML: Astro, under the MIT licence, ships no framework JavaScript until you add an interactive island. A single widget inside an existing page needs plain JavaScript, not a build. If the team already works with Vue or Svelte, adding React creates two ecosystems to maintain.

The limitation

React includes none of what production needs: routes, data, forms, tests and styling are separate decisions. The cost is not the first week, it is the assembly: every library you add brings a version to follow and a compatibility check on every upgrade.

The decision rule

Adopt React when at least two screens share state that must survive navigation. If the interaction lives in one spot on the page, or if the state can die when the URL changes, a small JavaScript island costs less: no framework bundle, no hydration. A quote form, a pricing page and a contact form stay below that threshold.

The mistake to avoid

The most common mistake is copying a prop into state with useEffect and then keeping the copy in step by hand. The duplicate starts from the previous render, the second update lands a frame later, and the test passes only because the machine is fast. If a value derives from props or from other state, compute it in the component body: state is for what an event creates.

Where to continue

The component distribution model is in what shadcn/ui is; the measured comparison of React libraries is in React libraries 2026; the choice between the two most used frameworks is in Vue 3 vs React.