Introduction

Overview

React is a declarative, component-based JavaScript library for building user interfaces. It is designed to scale from small widgets to large-scale applications by emphasizing predictable code and efficient rendering.

As a monorepo, the React project encompasses the core library, platform-specific renderers (like React DOM and React Native), and the React Compiler—a new toolchain designed to automate performance optimizations that previously required manual effort.

Core Pillars

React's architecture is built on three main principles:

• Declarative: You design simple views for each state in your application. React handles the complex task of efficiently updating and rendering the right components when your data changes. This makes code more predictable and easier to debug.
• Component-Based: You build encapsulated components that manage their own state, then compose them to create complex UIs. Because component logic is written in JavaScript rather than templates, you can pass rich data through your app easily while keeping state out of the DOM.
• Learn Once, Write Anywhere: React is agnostic of your technology stack. You can render on the server using Node and power mobile apps using React Native without rewriting your core logic.

The React Compiler

The React ecosystem is evolving from manual memoization to automatic optimization. Historically, developers used APIs like useMemo, useCallback, and React.memo to prevent unnecessary re-renders. The React Compiler (currently a Babel plugin) automates this process by analyzing your code and injecting memoization where necessary.

Automatic Memoization

The compiler performs escape analysis to determine if a value needs to be memoized. It identifies:

1. Escaping Values: Values returned from a function or passed into hooks (e.g., a dependency for useEffect).
2. Interleaved Dependencies: Values that, while not escaping themselves, are dependencies of other escaping values.

function Component(props) {
  // The compiler detects that 'a' is a dependency for 'b'.
  // Even if 'a' doesn't escape, it is memoized to prevent 'b' 
  // from invalidating on every render.
  const a = [props.a];
  const b = { data: a }; 

  return <Child data={b} />;
}

Validation and Best Practices

To facilitate these optimizations, the compiler enforces specific coding patterns. A key validation rule is the Capitalized Call check:

• Capitalized functions (e.g., <MyComponent />) are reserved for React components and must be invoked using JSX.
• Lowercase functions are treated as standard logic or Hooks.

Calling a capitalized function directly as a standard function will trigger a compiler error to ensure the render tree remains predictable and optimizable.

Getting Started

React is designed for gradual adoption. You can integrate it into an existing project as a small script or bootstrap a full-scale application using a modern toolchain.

Installation

React consists of two main packages: react (the core logic) and a renderer like react-dom.

npm install react react-dom

Basic Usage

The public interface relies on JSX, a syntax extension to JavaScript that describes what the UI should look like.

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

For more advanced configurations involving the React Compiler, refer to the Compiler Documentation.