History and versions

React has been around long enough to have gone through a few distinct eras, and knowing the rough shape of that history helps you read the code you'll meet in the wild. A tutorial from 2017 and a tutorial from today can both be "React" and yet look quite different. This chapter walks the timeline and explains the two styles you'll run into.

A short timeline

React started at Facebook, where it grew out of the need to keep large, data-heavy interfaces in sync without a tangle of manual DOM updates. It was released as open source in 2013, and the idea at its center, describe the UI for your current data and let React handle the updates, has stayed constant ever since. Almost everything else about how you write React has evolved around that core.

For its first several years, a component that needed to remember something was written as a JavaScript class. Classes are an ordinary JavaScript feature, and React used them to give a component somewhere to keep data that changes over time, along with a set of specially named methods React would call at certain moments: when the component first appeared on screen, when it updated, and when it was removed. This style was the default for a long stretch, and it is why so much of the React code already out there is written that way.

The big shift came with hooks, which arrived in React 16.8 in early 2019. A hook is a function React gives you that lets a plain function component do the things only a class could do before, like remembering a value between renders. Writing a component got a lot shorter, and function components quickly became the default for new code. Hooks covers them properly later on. The one thing to carry forward for now is that hooks are what made the modern style possible.

React has kept moving since: React 18 arrived in 2022 and React 19 in 2024, each adding capabilities and smoothing rough edges. Those releases matter most once you are building real applications, and they come up later in the handbook where they are relevant.

That's the arc in broad strokes. You don't need to memorize dates. The useful takeaway is that React has a long history, the fundamentals have held steady, and the writing style has moved decisively toward function components and hooks.

Two styles of React in the wild

Because of that history, you'll encounter React written in two noticeably different styles.

The older style writes a component as a class. Its changing data lives inside the class, and React calls specially named methods on it at set points in the component's life. A large amount of production code still runs this way, and a great many older tutorials, blog posts, and Stack Overflow answers are written in it. It still works and it is still supported. It is simply the earlier way of writing React.

What the older style looks like

This handbook doesn't teach this style and you don't need to write it. It is worth being able to recognize it, because you will run into it. An older codebase has components that look something like this:

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

  componentDidMount() {
    // React calls this once, just after the component first appears on screen
  }

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

Three things mark it out: class and extends React.Component at the top, this.state as the place its changing data lives, and method names starting with component that React calls automatically at set moments.

The modern style writes a component as a function and uses hooks to give it memory and to run code when things change. This is what new React code is written in, and it's what the official documentation now teaches first.

This track teaches modern React: function components and hooks throughout. Where you're likely to bump into the older class-based equivalent, whether in a codebase at work or an older tutorial, we'll flag it so the two connect in your head and neither one throws you.

Two releases since hooks are worth knowing by name. React 18, in 2022, brought concurrent rendering: React gained the ability to prepare updates in the background and interrupt work to keep the interface responsive. It also changed how an app starts, moving the entry point to createRoot, which is what opts an app into those newer capabilities.

React 19, in 2024, continued in that direction. It added Actions for handling form submissions and pending states, a use hook for reading resources like promises and context during render, and it let you pass ref as a regular prop instead of reaching for forwardRef. Alongside the releases, the React Compiler automates memoization: work developers used to do by hand with useMemo and useCallback can be handled at build time instead.

Hooks displaced classes rather than sitting beside them because the class model made stateful logic hard to share. Reusing behavior across components meant wrapping them in higher-order components or threading it through render props, both of which nested your tree and obscured where logic actually lived. Hooks let you extract that logic into a plain function, a custom hook, and call it from any component. The reuse story got dramatically simpler. Hooks also sidestep this: class components force you to bind methods and reason about what this refers to at call time, a recurring source of bugs that function components don't have.

The concurrent work in React 18 is a deeper change than the createRoot swap suggests. It altered how rendering itself behaves, well below the level of the API you call. React can now start rendering an update, pause it, and resume or abandon it, which means a render is no longer guaranteed to run start to finish in one go. Features like startTransition and Suspense-driven data loading build on that. It's why createRoot matters beyond being a new function name: opting in is what grants React permission to schedule and interrupt rendering this way.

From here the handbook builds in the modern style, and Components is where that starts in earnest: a component as a function that returns a piece of your UI. Before any of it runs, though, you need React installed and serving on your own machine.

JunoTwo styles, one React If you find a tutorial where components are written as class with this.state and componentDidMount, don't panic and don't think you're doing it wrong. That's the older style of React, and it still works. This track uses the newer style, function components with hooks, and I'll point out the older equivalents when we pass them so nothing catches you off guard.

JunoTwo styles, one React Quick map for reading real code: classes with this.state and lifecycle methods are the pre-hooks style, functions with useState and useEffect are modern React. You'll see both on the job. We build in the modern style here, and I'll flag the class-based equivalent when it's the thing you'll actually run into.

JunoTwo styles, one React The releases to keep straight: hooks in 16.8 changed the default authoring style and fixed logic reuse without HOCs or render props; 18 introduced concurrent rendering and moved the entry point to createRoot; 19 added Actions, the use hook, and ref as a prop. Hooks and concurrency are the two shifts that reach into rendering semantics, and they're the ones worth understanding at the mechanism level.

Next up: Setting up a React project, where you'll get React running on your own machine.