What is React?

A library, not a framework

React describes itself as a library for user interfaces. It handles defining components, managing their state and reflecting that state on screen. Everything else an application needs, such as routing, data fetching, code splitting, bundling and server rendering, sits outside React's core. That is why, when the React team deprecated Create React App for new projects in February 2025, it recommended starting with a framework such as Next.js, React Router or Expo, and pointed to build tools like Vite, Parcel or Rsbuild for projects with unusual constraints.

For websites in particular, React is usually one part of a framework like Next.js: React describes the interface, while the framework decides how pages are generated, served and cached.

Components and JSX

A React application is a tree of nested UI components. A component is a JavaScript function that receives props and returns a description of what to render. That description is written in JSX, an HTML-like syntax compiled into ordinary JavaScript calls:

import { useState } from "react";

function AddToCart({ productName, stock }) {
  const [quantity, setQuantity] = useState(1);

  return (
    <div>
      <p>{productName}: {quantity} in cart</p>
      <button onClick={() => setQuantity(quantity + 1)} disabled={quantity >= stock}>
        Add one
      </button>
    </div>
  );
}

Here productName and stock are props passed in from outside, while quantity is the component's own state. Clicking the button calls setQuantity; React re-runs the component and updates only the text and the button state that changed.

State and one-way data flow

React's central idea is that the UI is a function of state: the same state and props always produce the same output. Data flows down the tree as props. When a child needs something changed, it does not mutate the data itself but calls a function handed down by its parent. In a large interface, that one-way flow keeps the question “what changed this value?” answerable. Side effects such as fetching data, subscriptions or timers are handled with hooks like useEffect. React Compiler, which reached 1.0 in October 2025, adds the memoisation that developers used to write by hand to avoid unnecessary re-renders, automatically at build time.

How React updates the screen

When state changes, React first re-runs the affected components to produce a new description of the UI (the render phase), then compares it with the previous one and applies only the necessary DOM changes (the commit phase). This comparison is called reconciliation and is often explained through the virtual DOM. Concurrent rendering, introduced with React 18, lets React interrupt non-urgent updates to make room for higher-priority work such as typing or clicking.

React on the server, and what it means for SEO

In a React app that runs only in the browser, the HTML from the server is nearly empty and content appears once JavaScript executes, which carries the known crawling and performance risks of client-side rendering. With server-side rendering, components are turned into HTML on the server and made interactive in the browser through hydration. React 19, stable since December 2024, made Server Components an official part of React: some components run only on the server and send no JavaScript to the browser at all. The Next.js App Router is built on this model.

Server-side features also add attack surface. In December 2025 the React team shipped fixes for critical security vulnerabilities in React Server Components, which is a reminder that keeping React and the framework around it up to date is not just about new features.