React (software)

Contents

Quick Snapshot

Type: JavaScript library for building user interfaces.
Created by: Jordan Walke at Facebook (now Meta).
First released: 2013.
Core idea: Build UIs as reusable, stateful components instead of tangled DOM code.
Maintained by: Meta and an open-source community.
Tagline (unofficial): “The V in MVC — and proud of it.”
Website: react.dev

A Brief History

React was born at Facebook when engineers were struggling to manage ever-changing, complex interfaces.
Jordan Walke created the first prototype in 2011, and React was released publicly in 2013.

At first, the idea of mixing HTML and JavaScript in one file (via JSX) seemed bizarre.
Then developers tried it — and never looked back.

Over time, React evolved into a dominant force in web development, inspiring entire ecosystems like React Native, Next.js, and Remix.

Core Concepts

If you want to read the full cheat sheet for React, check out the React cheat sheet!

Components

Everything in React revolves around components — small, self-contained UI pieces that describe what should appear on screen.

They can be function components (modern and hook-powered) or class components (the OGs).
Example:

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

JSX

JSX (JavaScript XML) allows you to write HTML-like syntax inside JavaScript.
It’s syntactic sugar that makes components expressive and easy to read.

const element = <button>Click me</button>;

Behind the scenes, JSX compiles to React.createElement(). It looks like HTML, but it’s 100% JavaScript.

Virtual DOM

Instead of manipulating the browser’s DOM directly, React uses a Virtual DOM — a lightweight in-memory representation of the UI.

When state changes, React compares (“diffs”) the new Virtual DOM tree to the previous one and efficiently updates only what’s necessary.
Result: snappy UIs and happier developers.

State & Props

Props: Data passed into a component (like function parameters).
State: Data managed within a component (like memory that changes over time).

Together, they make React’s UIs predictable and reactive (no pun intended).

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      You clicked {count} times
    </button>
  );
}

Hooks

Introduced in React 16.8, Hooks let you use state and lifecycle features in function components.

Some favorites:

useState — for managing local component state.
useEffect — for side effects (fetching data, timers, subscriptions).
useContext — for global data without prop drilling.
useMemo, useCallback, useRef — for performance and references.

Hooks simplified React code dramatically — and made class components optional (though still supported).

Lifecycle

In function components, lifecycle moments are handled through Hooks.
For example:

useEffect(() => {
  console.log("Mounted!");
  return () => console.log("Unmounted!");
}, []);

That’s equivalent to the old componentDidMount and componentWillUnmount.

Rendering & Reconciliation

React’s rendering process:

Build a Virtual DOM tree.
Compare it to the previous one (diffing).
Update only what changed (reconciliation).

This approach allows smooth updates even in complex UIs — React handles the hard parts so you can focus on the logic.

Ecosystem

React by itself is just the UI library, but it thrives within a large ecosystem:

React Router — navigation and routing.
Redux / Zustand / Recoil / Jotai — state management solutions.
Next.js / Remix / Gatsby — full-stack frameworks built around React.
React Native — for building native mobile apps using React components.

React’s modular nature means you can use as much or as little as you like.

Tooling

Common tools and helpers in React projects:

Create React App (CRA): Simple setup (now less common in favor of Vite).
Vite / Next.js: Modern development with fast bundling and hot reload.
Babel: Compiles JSX into plain JavaScript.
ESLint / Prettier: Keep code tidy and consistent.
React DevTools: Inspect and debug components interactively.

Performance Tricks

Use React.memo to avoid unnecessary re-renders.
Split code dynamically with React.lazy() and Suspense.
Avoid anonymous inline functions in render-heavy trees.
Keep state localized — global state is convenient, but overkill for small stuff.
Use the useDeferredValue and useTransition Hooks for smooth UI updates (React 18+).

The React Philosophy

React follows a simple rule:

“UI = f(state)”

Your interface is a function of your data — change the data, React updates the UI.

This declarative model replaces manual DOM manipulation with logic that’s easier to reason about and debug.

Fun Facts

React’s logo looks like an atom — symbolizing its “component” philosophy.
The name “React” comes from how it reacts to state changes.
React wasn’t the first Virtual DOM library — but it was the one that made the idea mainstream.
Every major front-end framework since has borrowed from React’s ideas (and sometimes its syntax).