DOCSEARCHbyAlgolia
Submit Docs

React API Reference and Rules Documentation

website·Indexed 31 days ago

https://react.dev/

Technical documentation for React, covering core API references, Rules of React, and Hooks. Includes details on React Server Components (RSC) directives, eslint-plugin-react-hooks lint rules, React Compiler library compilation, and legacy APIs like Component and createElement.

Tokens
215K
Snippets
464
Records
1K
Agent score
49%

What's inside React Reference

  1. Overview of Client React DOM APIs

    The react-dom/client APIs are used to render React components in a browser environment. These APIs are typically invoked at the top level of an application to initialize the React component tree. While frameworks may handle this initialization for you, manual usage is required when building a React application from scratch.

    Key APIs include:

    • createRoot: Used to create a root to display React components inside a browser DOM node.
    • hydrateRoot: Used to display React components inside a browser DOM node that already contains HTML content generated by react-dom/server.

  2. Overview of React Compiler

    The React Compiler is an optimizing compiler designed to automatically handle re-renders, reducing the need for manual memoization using useMemo, useCallback, and memo. It works by modeling both JavaScript rules and the "rules of React" (e.g., components must be idempotent and cannot mutate props or state).

    To ensure your code is compatible with the compiler, it is recommended to:

    1. Enable Strict Mode.
    2. Configure the React ESLint plugin to catch subtle bugs and enforce React rules.

  3. Overview of eslint-plugin-react-hooks

    The eslint-plugin-react-hooks plugin provides ESLint rules to enforce the Rules of React. It helps catch violations of React's rules for correctness and performance at build time.

    Key features include:

    • Enforcement of fundamental React patterns (e.g., exhaustive-deps, rules-of-hooks).
    • Automatic surfacing of React Compiler diagnostics, allowing developers to identify patterns that break the Rules of React even if the app hasn't adopted the compiler yet.

    Note: When the React Compiler detects a pattern it cannot statically verify, it automatically skips those components/hooks to ensure the rest of the app remains optimized without breaking functionality. This allows developers to address linting violations at their own pace.

  4. Overview of React Forget (React Optimizing Compiler)

    React Forget is an upcoming optimizing compiler designed to automate reactivity in React applications. Its primary goal is to ensure apps re-render only when state values meaningfully change, rather than whenever object identity changes.

    Key technical details:

    • Automatic Memoization: It automatically handles memoization so developers don't have to manually use useMemo or useCallback to prevent unnecessary re-renders.
    • Semantic Reactivity: It shifts the re-render trigger from object identity to semantic value changes without the runtime cost of deep comparisons.
    • Implementation: The core compiler is decoupled from Babel and uses a custom code representation and transformation pipeline for low-level semantic analysis. The primary public interface will be via Babel or other build system plugins.
    • Language Support: It is designed to support a subset of JavaScript (including let/const, if/else, for loops, objects, arrays, and primitives) and is being incrementally expanded to support the full language.

  5. Overview of react-dom Hooks

    The react-dom package provides specialized Hooks that are only supported in web applications running in a browser DOM environment. These Hooks are not compatible with non-browser environments such as iOS, Android, or Windows applications. For environment-agnostic Hooks, use the standard React Hooks API.

  6. Overview of React DOM Components

    React supports all built-in browser HTML and SVG components. These components are categorized into several types based on their functionality:

    • Common components: Standard elements like <div> that support React-specific props such as ref and dangerouslySetInnerHTML.
    • Form components: Elements that accept user input, specifically <input>, <select>, and <textarea>. In React, passing the value prop to these components makes them controlled components.
    • Resource and Metadata Components: Elements used to load external resources or annotate the document, such as <link>, <meta>, <script>, <style>, and <title>. React provides special handling for these, including the ability to render them into the document <head> and suspend rendering while resources are loading.

  7. Overview of built-in React components

    React provides several built-in components for managing JSX structure, performance monitoring, loading states, and development checks:

    • <Fragment> (or <>...</>): Allows grouping multiple JSX nodes together without adding extra nodes to the DOM.
    • <Profiler>: Used to measure the rendering performance of a React component tree programmatically.
    • <Suspense>: Allows you to display a fallback UI (like a spinner) while child components are in a loading state.
    • <StrictMode>: Enables additional development-only checks and warnings to help identify potential bugs early.
    • <Activity>: Used to hide and restore the UI and internal state of its children.

  8. Overview of React Optimizing Compiler (React Forget)

    The React Optimizing Compiler (formerly referred to as 'React Forget') is an automatic reactivity compiler designed to reduce unnecessary re-renders.

    In standard React, developers often must manually memoize components or values (using useMemo or useCallback) to prevent over-reactivity caused by JavaScript's inability to cheaply compare complex objects or arrays. The compiler aims to automate this process, allowing developers to use standard JavaScript idioms while React handles the underlying reactivity and memoization optimizations automatically.

  9. Overview of React DOM APIs

    The react-dom package provides methods specifically for web applications running in a browser DOM environment. These APIs are not supported for React Native. The package is organized into different entry points depending on whether you are rendering on the client or the server.

  10. Overview of recommended React frameworks

    When building a new React application, it is recommended to start with a framework that supports production-scale features. These frameworks support Client-Side Rendering (CSR), Single-Page Apps (SPA), and Static-Site Generation (SSG), allowing for deployment to CDNs without a server, while also offering optional server-side rendering (SSR) on a per-route basis.

    Recommended Frameworks

    • Next.js (App Router): Full-stack framework with deep integration of React Server Components and Suspense.
    • React Router (v7): Routing-focused framework that can be paired with Vite.
    • Expo: For building native mobile (iOS/Android) and web applications.

    Emerging Frameworks

    • TanStack Start (Beta): Full-stack framework powered by TanStack Router, featuring SSR, streaming, and server functions.
    • RedwoodJS: Full-stack framework with pre-configured packages for rapid development.

  11. Overview of Built-in React Hooks by Category

    React provides several built-in Hooks to enable different features within components. They are categorized by their primary purpose:

    • State Hooks: Manage component memory (e.g., useState, useReducer).
    • Context Hooks: Access data from distant parents without prop drilling (e.g., useContext).
    • Ref Hooks: Hold information that doesn't trigger re-renders, like DOM nodes or timeout IDs (e.g., useRef, useImperativeHandle).
    • Effect Hooks: Synchronize components with external systems like network, DOM, or browser APIs (e.g., useEffect, useLayoutEffect, useInsertionEffect, useEffectEvent).
    • Performance Hooks: Optimize rendering by caching calculations or prioritizing updates (e.g., useMemo, useCallback, useTransition, useDeferredValue).
    • Other Hooks: Specialized hooks often used by library authors or for specific utilities (e.g., useId, useSyncExternalStore, useDebugValue, useActionState).

  12. Overview of React 18 features and concurrent rendering

    React 18 introduces concurrent rendering, an opt-in mechanism that allows React to prepare multiple versions of the UI simultaneously. This is not an all-or-nothing "mode" but is enabled specifically for updates triggered by new features, allowing for a gradual adoption without requiring application rewrites.

    Key features included in React 18:

    • Automatic batching: Improvements to how multiple state updates are grouped.
    • startTransition API: A new API to mark certain updates as non-urgent.
    • Streaming server renderer: New support for streaming with built-in React.lazy support.