react

What is react?

The react npm package is a JavaScript library for building user interfaces, particularly for single-page applications. It allows developers to create reusable UI components and manage the state of their applications efficiently.

What are react's main functionalities?

Component-Based Architecture

React allows developers to encapsulate UI logic and design into components, which can then be composed to build complex user interfaces.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
ReactDOM.render(<Welcome name='Jane' />, document.getElementById('root'));

State Management

React provides a way to manage the state within components, enabling dynamic and interactive user interfaces.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

Lifecycle Methods

React components come with lifecycle methods that are invoked at specific points in a component's lifecycle, allowing developers to hook into the component's creation, updating, and destruction processes.

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({
      date: new Date()
    });
  }
  render() {
    return (
      <div>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Hooks

Hooks are functions that let developers 'hook into' React state and lifecycle features from function components. They provide a way to use stateful logic without writing a class.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

Other packages similar to react

vue

Vue.js is a progressive JavaScript framework used for building user interfaces. Unlike React, which is only the view layer, Vue includes a more comprehensive set of tools for building web applications, including a routing solution and state management solution.

angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is more prescriptive than React, providing a standard way to structure an application and including a wide array of features out-of-the-box, such as dependency injection, templating, routing, and more.

preact

Preact is a fast, 3kB alternative to React with the same modern API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. Preact is a good choice for when performance is critical, and the application needs to be as lightweight as possible.

svelte

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app, resulting in significantly smaller and faster applications.

README

react

React is a JavaScript library for creating user interfaces.

The react package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.

Note: by default, React will be in development mode. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages. Don't forget to use the production build when deploying your application.

Usage

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<Counter />);

Documentation

See https://react.dev/

API

See https://react.dev/reference/react

Changelog

19.1.0 (March 28, 2025)

Owner Stack

An Owner Stack is a string representing the components that are directly responsible for rendering a particular component. You can log Owner Stacks when debugging or use Owner Stacks to enhance error overlays or other development tools. Owner Stacks are only available in development builds. Component Stacks in production are unchanged.

• An Owner Stack is a development-only stack trace that helps identify which components are responsible for rendering a particular component. An Owner Stack is distinct from a Component Stacks, which shows the hierarchy of components leading to an error.
• The captureOwnerStack API is only available in development mode and returns a Owner Stack, if available. The API can be used to enhance error overlays or log component relationships when debugging. #29923, #32353, #30306, #32538, #32529, #32538

React

• Enhanced support for Suspense boundaries to be used anywhere, including the client, server, and during hydration. #32069, #32163, #32224, #32252
• Reduced unnecessary client rendering through improved hydration scheduling #31751
• Increased priority of client rendered Suspense boundaries #31776
• Fixed frozen fallback states by rendering unfinished Suspense boundaries on the client. #31620
• Reduced garbage collection pressure by improving Suspense boundary retries. #31667
• Fixed erroneous “Waiting for Paint” log when the passive effect phase was not delayed #31526
• Fixed a regression causing key warnings for flattened positional children in development mode. #32117
• Updated useId to use valid CSS selectors, changing format from :r123: to «r123». #32001
• Added a dev-only warning for null/undefined created in useEffect, useInsertionEffect, and useLayoutEffect. #32355
• Fixed a bug where dev-only methods were exported in production builds. React.act is no longer available in production builds. #32200
• Improved consistency across prod and dev to improve compatibility with Google Closure Complier and bindings #31808
• Improve passive effect scheduling for consistent task yielding. #31785
• Fixed asserts in React Native when passChildrenWhenCloningPersistedNodes is enabled for OffscreenComponent rendering. #32528
• Fixed component name resolution for Portal #32640
• Added support for beforetoggle and toggle events on the dialog element. #32479 #32479

React DOM

• Fixed double warning when the href attribute is an empty string #31783
• Fixed an edge case where getHoistableRoot() didn’t work properly when the container was a Document #32321
• Removed support for using HTML comments (e.g. <!-- -->) as a DOM container. #32250
• Added support for <script> and <template> tags to be nested within <select> tags. #31837
• Fixed responsive images to be preloaded as HTML instead of headers #32445

use-sync-external-store

• Added exports field to package.json for use-sync-external-store to support various entrypoints. #25231

React Server Components

• Added unstable_prerender, a new experimental API for prerendering React Server Components on the server #31724
• Fixed an issue where streams would hang when receiving new chunks after a global error #31840, #31851
• Fixed an issue where pending chunks were counted twice. #31833
• Added support for streaming in edge environments #31852
• Added support for sending custom error names from a server so that they are available in the client for console replaying. #32116
• Updated the server component wire format to remove IDs for hints and console.log because they have no return value #31671
• Exposed registerServerReference in client builds to handle server references in different environments. #32534
• Added react-server-dom-parcel package which integrates Server Components with the Parcel bundler #31725, #32132, #31799, #32294, #31741