React.js Version History

React.js Version History — Detailed Guide

React has evolved significantly since its initial release. For someone learning React 19 today, understanding this history is useful because many interview questions and real-world codebases still use React 16, 17, or 18.

As of November 2026, the latest stable React release is React 19.3.0, released on September 9, 2026. React

1. React Timeline at a Glance

2013 ── React 0.3
        │
2014 ── React 0.12
        │
2015 ── React 0.13
        └─ React 0.14
        │
2016 ── React 15
        │
2017 ── React 16
        │   └─ Fiber architecture
        │
2018 ── React 16.3
        │   └─ Context, Lifecycle improvements
        │
2019 ── React 16.8
        │   └─ Hooks ⭐
        │
2020 ── React 17
        │   └─ Gradual upgrades
        │
2022 ── React 18
        │   └─ Concurrent rendering ⭐
        │
2024 ── React 19
        │   └─ Actions, Server Components improvements ⭐
        │
2025 ── React 19.1
        │   └─ React 19.2
        │
2026 ── React 19.3 ⭐ Current

React's major-version history follows semantic versioning: major versions indicate breaking changes, while minor versions generally introduce features and fixes without major breaking changes. React

2. React 0.x — The Beginning

React 0.3 — 2013

React originated inside Facebook and was open-sourced in 2013.

The fundamental idea was different from traditional DOM programming.

Traditional JavaScript:

document.getElementById("message").innerHTML = "Hello";

React introduced a model where you describe what the UI should look like based on application state.

Conceptually:

<h1>Hello</h1>

React handled the process of updating the actual DOM.

Major idea

Application State
       ↓
     React
       ↓
      UI
       ↓
 Real DOM

This declarative approach became one of React's defining characteristics.

3. React 0.13 — 2015

React 0.13 was an important step toward the component-based architecture developers recognize today.

Components became easier to compose and reuse.

Example:

function Header() {
    return <header>My Website</header>;
}

function App() {
    return (
        <div>
            <Header />
            <h1>Welcome</h1>
        </div>
    );
}

The idea of building an application from reusable components became central to React.

4. React 0.14 — 2015

Released in October 2015. legacy.reactjs.org

One particularly important change was the separation of:

react
react-dom

Before this era, React's DOM-specific functionality was more tightly coupled.

Afterward:

react
   ↓
Core React functionality

react-dom
   ↓
Browser DOM rendering

This separation was important for supporting environments beyond the browser, including React Native.

Example

import React from "react";
import ReactDOM from "react-dom";

5. React 15 — 2016

React 15 was released in April 2016. legacy.reactjs.org

This was the first major version after the 0.x series.

React moved from:

0.14

to:

15.0

Important improvements

React 15 improved:

• DOM rendering
• SVG support
• DOM interaction
• Performance
• Error handling
• Stability

React also stopped actively supporting Internet Explorer 8. legacy.reactjs.org

Why React 15 matters

It established React as a mature production UI library rather than an experimental 0.x project.

6. React 16 — The Major Revolution

React 16 was released in September 2017. legacy.reactjs.org

This was one of the most important releases in React's history.

The biggest architectural change was the introduction of Fiber.

React Fiber

Before React 16, React's reconciliation process had limitations around interrupting and prioritizing rendering work.

Fiber redesigned the reconciliation architecture.

Conceptually:

Old React

Component Tree
      ↓
Render everything
      ↓
DOM update

Fiber enabled React to break rendering work into smaller units.

Rendering Work
      ↓
Fiber
 ┌────┬────┬────┬────┐
 │Work│Work│Work│Work│
 └────┴────┴────┴────┘
      ↓
Can prioritize work
      ↓
UI update

This architecture eventually became the foundation for many of React's later concurrent rendering capabilities.

7. Major Features of React 16

React 16 introduced several important features.

Fragments

Instead of:

<div>
    <h1>Hello</h1>
    <p>Welcome</p>
</div>

you could use fragments:

<>
    <h1>Hello</h1>
    <p>Welcome</p>
</>

Error Boundaries

React introduced error boundaries for handling rendering errors.

class ErrorBoundary extends React.Component {
    componentDidCatch(error, info) {
        console.log(error);
    }

    render() {
        return this.props.children;
    }
}

This allowed applications to prevent one component failure from crashing the entire UI.

Portals

Portals allowed rendering a component into another DOM location.

ReactDOM.createPortal(
    <Modal />,
    document.getElementById("modal-root")
);

This became particularly useful for:

• Modals
• Dialogs
• Tooltips
• Dropdowns

Custom DOM Attributes

React 16 improved support for custom attributes on DOM elements.

8. React 16.2 — Fragments

React 16.2 introduced the convenient fragment syntax:

<>
    <Header />
    <Content />
    <Footer />
</>

Instead of creating unnecessary wrapper elements.

9. React 16.3 — Context API

React 16.3 introduced the modern Context API.

Before Context, developers often had to pass data through many component levels:

App
 ↓
A
 ↓
B
 ↓
C
 ↓
D

Even if only D needed the data.

Context allowed:

          Context
         ↙   ↓   ↘
        A    B    C
                  ↓
                  D

Example:

const ThemeContext = React.createContext("light");

Then:

<ThemeContext.Provider value="dark">
    <App />
</ThemeContext.Provider>

And consume it:

const theme = useContext(ThemeContext);

The useContext API itself came later with Hooks.

10. React 16.8 — Hooks

This is arguably the most important React release for modern developers.

React 16.8 introduced Hooks.

Released in February 2019.

Before Hooks, state and lifecycle logic were commonly implemented using class components.

class Counter extends React.Component {
    state = {
        count: 0
    };

    render() {
        return <button>{this.state.count}</button>;
    }
}

With Hooks:

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            {count}
        </button>
    );
}

This fundamentally changed how React applications were written.

11. Important React Hooks

React 16.8 introduced the Hooks model, including APIs such as:

useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef

For example:

const [name, setName] = useState("Syed");

And:

useEffect(() => {
    console.log("Component loaded");
}, []);

Why Hooks were important

They allowed developers to use state and lifecycle-like behavior inside function components.

This led to the modern React programming style:

Old React

Class Components
      ↓
Lifecycle Methods
      ↓
State

Modern React

Function Components
      ↓
Hooks
      ↓
State + Effects + Context + Refs

12. React 17 — 2020

React 17 was released in October 2020. React

React 17 was unusual.

It did not focus on introducing a large collection of developer-facing features.

Instead, it was called a release focused on making React easier to upgrade.

The main idea: gradual upgrades

React 17 improved the ability to run different React versions in the same application or upgrade React incrementally.

For example:

Large Application
       │
       ├── React 16
       │
       ├── React 17
       │
       └── Gradually migrate

This was especially useful for:

• Large applications
• Micro-frontends
• Applications maintained by multiple teams

13. React 17 — New JSX Transform

React 17 also introduced the new JSX transform.

Previously, you generally wrote:

import React from "react";

function App() {
    return <h1>Hello</h1>;
}

With the newer JSX transform, you don't need to import React merely to use JSX:

function App() {
    return <h1>Hello</h1>;
}

The compiler handles the JSX transformation.

This became the standard approach in modern React projects.

14. React 18 — Another Major Revolution

React 18 was released in March 2022. React

React 18 introduced the concept of concurrent rendering.

This is extremely important for understanding modern React.

15. React 18 — Concurrent Rendering

The word concurrent does not simply mean multithreading.

React can interrupt, prioritize, and resume rendering work.

Conceptually:

User Interaction
      ↓
High Priority
      ↓
React renders immediately

Large UI Update
      ↓
Lower Priority
      ↓
React can schedule the work

This helps React maintain responsiveness during expensive UI updates.

16. React 18 — createRoot

React 18 introduced the new root API.

React 17 style

ReactDOM.render(
    <App />,
    document.getElementById("root")
);

React 18+

const root = ReactDOM.createRoot(
    document.getElementById("root")
);

root.render(<App />);

This is an important difference when migrating older React applications.

17. React 18 — Automatic Batching

React 18 expanded automatic batching.

Suppose you have:

setCount(count + 1);
setName("Syed");

React can batch these updates into a single rendering operation.

Conceptually:

setCount()
    +
setName()
    ↓
Batch
    ↓
One Render

This improves performance.

18. React 18 — Suspense Improvements

Suspense became significantly more useful with React 18.

Example:

<Suspense fallback={<Loading />}>
    <Profile />
</Suspense>

While the required content is loading:

Profile Loading
      ↓
<Loading />
      ↓
Profile Ready
      ↓
<Profile />

19. React 18 — Transitions

React 18 introduced APIs for marking updates as non-urgent.

For example:

const [isPending, startTransition] =
    useTransition();

Then:

startTransition(() => {
    setSearchResults(results);
});

This tells React that the update can be treated as lower priority.

20. React 18 — useDeferredValue

Another important API:

const deferredQuery =
    useDeferredValue(query);

Useful when you want the UI to remain responsive while expensive content updates.

21. React 18 — useId

React 18 introduced:

const id = useId();

It provides stable unique IDs that work correctly with server rendering and hydration.

Example:

const id = useId();

<label htmlFor={id}>
    Email
</label>

<input id={id} />

22. React 18.2

React 18.2 became a very widely used production version.

For years, you would encounter applications such as:

{
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
}

This is still common in existing enterprise applications.

23. React 18.3

React 18.3 was released in 2024 primarily to prepare applications for React 19.

The 18.3 release included additional warnings and migration-related changes.

So:

React 18.2
    ↓
React 18.3
    ↓
React 19

was a useful upgrade path.

24. React 19 — 2024

React 19 became stable in December 2024. React

This is the version you should focus on when learning modern React.

React 19 continued the direction started by React 18 but introduced much more powerful APIs around:

• Actions
• Forms
• Server Components
• Server Functions
• Async operations
• ref
• Metadata
• Better resource handling

25. React 19 — Actions

One of the major concepts in React 19 is Actions.

Consider a form:

async function updateName(formData) {
    const name = formData.get("name");

    await updateUser(name);
}

React 19 provides better mechanisms for handling asynchronous mutations and their states.

This reduces the amount of manual code traditionally required for:

Submit
 ↓
Loading
 ↓
API Request
 ↓
Success/Error
 ↓
Update UI

26. React 19 — useActionState

React 19 introduced:

useActionState()

Example:

const [state, action, isPending] =
    useActionState(
        submitForm,
        initialState
    );

This helps manage:

• Form submission
• Pending state
• Server responses
• Validation errors

27. React 19 — useOptimistic

React 19 introduced:

useOptimistic()

This is useful for optimistic UI.

Suppose a user clicks:

Like

Instead of waiting for the API:

Click Like
     ↓
Immediately show Like
     ↓
API request
     ↓
Server confirms

The user gets a faster-feeling application.

28. React 19 — use

React 19 introduced the use API.

Conceptually:

const data = use(promise);

This allows React to integrate asynchronous resources into rendering patterns.

It works particularly closely with Suspense and Server Components.

29. React 19 — ref as a Prop

Historically, function components commonly used:

forwardRef()

React 19 allows ref to be accessed as a prop in function components.

Conceptually:

function Input({ ref }) {
    return <input ref={ref} />;
}

This simplifies some ref-related component APIs.

30. React 19 — Metadata

React 19 improved support for document metadata directly from components.

For example:

function About() {
    return (
        <>
            <title>About Us</title>
            <meta
                name="description"
                content="About our company"
            />
        </>
    );
}

React can handle these metadata elements appropriately.

This is particularly useful for SEO and document-level metadata.

31. React 19 — Stylesheets and Scripts

React 19 improved resource loading and handling for things such as:

<link>
<script>
<style>

React can better coordinate these resources with rendering.

32. React 19.1 — 2025

React 19.1 was released in March 2025. React

It continued improvements around:

• React Server Components
• Server Functions
• Development experience
• React DOM
• Debugging and tooling

React 19.1 was primarily an incremental improvement over React 19 rather than a completely new programming model.

33. React 19.2 — October 2025

React 19.2 introduced several notable features. React

<Activity />

One of the major additions:

<Activity mode="visible">
    <Dashboard />
</Activity>

Activity allows React to manage parts of the application as activities that can be controlled and prioritized.

useEffectEvent

React 19.2 introduced:

useEffectEvent()

It helps separate event-like logic from effect dependencies in situations where this distinction matters.

cacheSignal

React 19.2 introduced:

cacheSignal

which provides cache-related lifecycle information.

Performance Tracks

React 19.2 also introduced Performance Tracks to improve visibility into React's performance behavior.

Partial Pre-rendering

React DOM gained support for partial pre-rendering, which is particularly relevant to modern server-rendered applications. React

34. React 19.3 — Current

As of November 2026, React 19.3.0 is the latest stable release, released September 9, 2026. React

React 19.3 introduced features including:

• View Transitions
• Fragment Refs
• browser()
• Trusted Types
• Additional React DOM improvements

The React team lists v19.3.0 as the current stable release. React

35. React 19.3 — View Transitions

View Transitions make it easier to create smooth visual transitions when UI changes.

Conceptually:

Old UI
  ↓
Transition
  ↓
New UI

This is particularly interesting for modern applications where navigation and UI changes need to feel more like native applications.

36. React 19.3 — Fragment Refs

React 19.3 also introduced Fragment Refs.

Historically, a ref generally pointed to a specific DOM element.

Fragment refs extend this capability to fragments.

Conceptually:

<>
    <div />
    <div />
</>

can be treated as a ref-targeted group.

This is useful for more advanced DOM interaction.

37. React 19.3 — Trusted Types

React 19.3 adds support related to Trusted Types, which helps applications integrate more effectively with browser security mechanisms designed to reduce certain classes of DOM-based injection vulnerabilities.

38. React Version Evolution

The evolution can be understood as several major stages:

React 0.x
   │
   │ Component-based UI
   │
   ▼
React 15
   │
   │ Mature production library
   │
   ▼
React 16
   │
   │ Fiber
   │ Fragments
   │ Error Boundaries
   │ Portals
   │
   ▼
React 16.8
   │
   │ Hooks
   │
   ▼
React 17
   │
   │ Easier upgrades
   │ New JSX Transform
   │
   ▼
React 18
   │
   │ Concurrent Rendering
   │ Automatic Batching
   │ Transitions
   │ Suspense improvements
   │
   ▼
React 19
   │
   │ Actions
   │ use
   │ Forms
   │ Server Components
   │ Metadata
   │
   ▼
React 19.2
   │
   │ Activity
   │ useEffectEvent
   │ cacheSignal
   │ Performance Tracks
   │
   ▼
React 19.3
   │
   │ View Transitions
   │ Fragment Refs
   │ Trusted Types
   │
   ▼
CURRENT

39. Most Important Versions to Remember

For interviews, you don't need to memorize every patch release.

Focus on these:

40. What About Create React App?

This is an important distinction.

CRA is not a React version.

It is a project scaffolding/build tool.

React
│
├── React 16
├── React 17
├── React 18
└── React 19

Whereas:

Create React App
│
└── Tool for creating React projects

CRA was historically popular:

npx create-react-app my-app

But the React team officially deprecated Create React App for new applications in February 2025, recommending a framework or build tools such as Vite, Parcel, or RSBuild. React

Therefore, for your React 19 learning, I recommend:

npm create vite@latest my-react-app

rather than:

npx create-react-app my-react-app

41. React Version You Should Learn

Since your goal is to learn modern React comprehensively, I would structure your learning around React 19.x, while understanding the important concepts introduced in previous releases.

JavaScript ES6+
      ↓
React Fundamentals
      ↓
Components
      ↓
JSX
      ↓
Props
      ↓
State
      ↓
Events
      ↓
Hooks
      ↓
Context
      ↓
React Router
      ↓
Forms
      ↓
API Integration
      ↓
Performance
      ↓
React 18 Concepts
      ↓
React 19 Features
      ↓
Server Components
      ↓
Actions
      ↓
React 19.2 / 19.3
      ↓
Advanced React

The key point is that React 19 didn't replace everything from React 18. Modern React is cumulative:

React 16 → Fiber
        ↓
React 16.8 → Hooks
        ↓
React 17 → Upgrade infrastructure
        ↓
React 18 → Concurrent rendering
        ↓
React 19 → Actions + async/server capabilities
        ↓
React 19.2/19.3 → Activity + modern UI/platform features

So when you learn React 19, you are effectively learning the accumulated architecture and APIs from the previous generations as well.