React Official Documentation

React Hooks allow you to use different React features (like state, context, and lifecycle methods) from functional components. They are categorized by their primary purpose:

• State Hooks: For remembering information like user input or UI state (useState, useReducer).
• Context Hooks: For receiving information from distant parents without prop drilling (useContext).
• Ref Hooks: For holding information that doesn't trigger re-renders, such as DOM nodes or timer IDs (useRef, useImperativeHandle).
• Effect Hooks: For synchronizing with external systems like networks, browser APIs, or animations (useEffect, useLayoutEffect, useInsertionEffect, useEffectEvent).
• Performance Hooks: For skipping unnecessary work or prioritizing UI updates (useMemo, useCallback, useTransition, useDeferredValue).
• Other Hooks: Specialized hooks for library authors or specific use cases (useDebugValue, useId, useSyncExternalStore, useActionState).

The React Compiler is a build-time tool that automatically optimizes React applications by applying memoization. It understands the Rules of React and works with plain JavaScript, eliminating the need for manual memoization using useMemo, useCallback, or React.memo in most cases.

Key Benefits

• Automatic Memoization: Automatically skips cascading re-renders of components and memoizes expensive calculations within components and hooks.
• Reduced Boilerplate: Allows you to write cleaner code without the mental burden of manual dependency arrays and memoization wrappers.
• Fine-grained Reactivity: Ensures that only the relevant parts of an application re-render when state changes.

Supported Build Tools

• Babel: The primary integration method via a Babel plugin.
• Vite, Metro, and Rsbuild.
• Next.js: Users can enable the swc-invoked React Compiler using version v15.3.1 or higher.
• Future Support: Work is ongoing for first-class support in swc and oxc to reduce reliance on Babel.

As of June 2022, the React team is actively researching several key areas to improve performance, developer experience, and server-side capabilities. Note that these are research directions and not a fixed roadmap with concrete ship dates.

Key areas of focus include:

• Server Components (RSC): Moving towards an async/await model for data fetching and using boundary annotations instead of file extensions.
• Asset Loading: Developing APIs to preload and load deduplicated external assets (scripts, styles, fonts, images) that integrate with Suspense to prevent layout shifts.
• React Optimizing Compiler: An evolution of 'React Forget' that automatically generates useMemo and useCallback equivalents to minimize re-renders.
• Offscreen: A low-level capability to hide UI visually while deprioritizing its rendering work, allowing for features like instant transitions, reusable state, and virtualized list rendering.
• Transition Tracing: A new version of the Interaction Tracing API (tentatively called Transition Tracing) to help developers track why specific interactions (like button clicks or navigations) are slow.
• Static Server Rendering Optimizations: Exploring ways to optimize dynamic SSR using compilation and static passes.

The React reference documentation is organized into functional subsections to help you find specific APIs and guides. Use the following structure to locate the documentation you need:

• React: Core programmatic features including Hooks, Components, APIs, and Directives for React Server Components.
• React DOM: Features specific to web applications, including Hooks, Components, Client APIs, Server APIs, and Static APIs.
• React Compiler: Build-time optimization tool documentation covering Configuration, Directives, and Compiling Libraries.
• ESLint Plugin React Hooks: Documentation for the ESLint plugin that enforces the Rules of React.
• Rules of React: Idiomatic rules for writing high-quality React code, including Purity, Calling Components, and Rules of Hooks.
• Legacy APIs: Deprecated features exported from the react package that are not recommended for new code Legacy APIs.

Concurrent React is a foundational update to React's core rendering model that enables React to prepare multiple versions of your UI simultaneously. Unlike synchronous rendering, where an update cannot be interrupted until the user sees the result, Concurrent React allows rendering to be interruptible.

Key characteristics include:

• Interruptible Rendering: React can pause, resume, or even abandon an in-progress render to keep the UI responsive to user input.
• Consistent UI: React guarantees UI consistency by waiting to perform DOM mutations until the entire tree has been evaluated.
• Background Preparation: React can prepare new screens in the background without blocking the main thread.
• Reusable State: React can remove UI sections and add them back later while preserving their previous state (e.g., using an upcoming <Offscreen> component).

Concurrent React is opt-in: it is only enabled in parts of your application that use specific concurrent features like startTransition, useDeferredValue, or Suspense.