DOCSEARCHbyAlgolia
Submit Docs

React

repository·main·Indexed 13 days ago

https://github.com/facebook/react

A JavaScript library for building user interfaces using a declarative and component-based approach. This documentation includes details on the React Compiler pipeline, the babel-plugin-react-compiler, eslint-plugin-react-compiler, and the React Compiler Playground.

Tokens
211.1K
Snippets
556
Records
852
Agent score
99%

What's inside React

  2. Overview of the scheduler package

    main
    The scheduler package provides a mechanism for cooperative scheduling within a browser environment. While it is currently used internally by React to manage task execution, it is intended to eventually become a more generic utility for cooperative scheduling.

  4. Overview of react-server implementations: Fizz and Flight

    main

    The react-server package provides experimental server-side rendering capabilities through two primary implementations:

    • Fizz: A renderer for Server Side Rendering (SSR). It runs the same code on the server that runs on the client to produce an initial view, allowing the client to display content before downloading and executing the full React bundle.
    • Flight: A renderer for React Server Components (RSC). It handles components that only run on the server. The output of a Flight render can be a React tree for the client or can be SSR'd using Fizz.

    Warning: This package is experimental, its API is unstable, and it does not follow common versioning schemes. Use it at your own risk.

  5. Overview of the React Compiler

    main

    The React Compiler is an optimization tool for React applications. It performs two primary functions:

    1. Performance Optimization: It ensures that only the minimal parts of components and hooks re-render when state changes, reducing unnecessary computations.
    2. Rule Validation: It automatically validates that components and hooks adhere to the 'Rules of React', helping to prevent common bugs related to component lifecycle and state management.

    For deep dives into the underlying architecture, refer to the Design Goals. For those looking to contribute to the compiler's codebase, see the Development Guide.

  6. Understand the `react_compiler_ast` crate purpose and structure

    main

    The react_compiler_ast crate is a Rust implementation of the Babel AST structure. Its primary goal is to enable 1:1 JSON round-tripping between the JavaScript toolchain (Babel parser in Node.js) and the Rust compiler. It is a faithful representation of Babel's AST output rather than a custom Intermediate Representation (IR).

    Crate Organization

    • src/lib.rs: Top-level File and Program types.
    • src/statements.rs: Statement enum and statement node structs.
    • src/expressions.rs: Expression enum and expression node structs.
    • src/literals.rs: Literal node structs (e.g., StringLiteral, NumericLiteral).
    • src/patterns.rs: PatternLike enum and pattern node structs.
    • src/jsx.rs: JSX node structs and enums.
    • src/declarations.rs: Import/export, TS, and Flow declarations.
    • src/common.rs: SourceLocation, Position, Comment, BaseNode, and helpers.
    • src/operators.rs: Operator enums (e.g., BinaryOperator, UnaryOperator).
    • tests/round_trip.rs: Round-trip test harness.
    [package]
name = "react_compiler_ast"
version = "0.1.0"
edition = "2024"

[dependencies]
serde = { version = "1", features = ["derive"] }
serde_json = "1"

[dev-dependencies]
walkdir = "2"
similar = "2"

  7. Use react-debug-tools for renderer debugging

    main

    The react-debug-tools package is an experimental utility designed for debugging React renderers.

    Warning: This package is experimental. Its API is not as stable as core React, React Native, or React DOM, and it does not follow the standard React versioning scheme. Use it at your own risk.

  8. Use react-suspense-test-utils with caution

    main

    The react-suspense-test-utils package is designed exclusively for use with experimental, unreleased React features. It is not intended for production environments or real-world applications.

    Warning:

    • Do not use in a real application.
    • The API is highly unstable and is expected to change significantly between versions.
    • Use it at your own risk.

  9. Understand the React Compiler Pass Categories

    main

    The React Compiler operates through a series of specialized 'passes' categorized by their role in the compilation pipeline. These categories include:

    • HIR Construction & SSA: Converts Babel AST to a High-level Intermediate Representation (HIR) control-flow graph and transforms it into Static Single Assignment (SSA) form.
    • Optimization: Performs constant propagation and dead code elimination.
    • Type Inference: Uses constraint-based type unification.
    • Mutation/Aliasing Inference: Analyzes function effects, infers mutation/aliasing via abstract interpretation, and marks reactive places (props, hooks, derived values).
    • Reactive Scope Variables: Groups co-mutating variables into scopes and rewrites instruction kinds based on reassignment.
    • Scope Alignment: Aligns method call and object method scopes with receivers and control-flow block boundaries.
    • Scope Construction: Merges overlapping scopes, inserts scope terminals into the CFG, and prunes scopes inside loops.
    • Scope Flattening & Dependencies: Prunes scopes containing hooks and derives minimal scope dependencies.
    • HIR → Reactive Conversion: Converts the CFG into a tree-based ReactiveFunction structure.
    • Reactive Function Pruning: Removes unused labels, non-escaping scopes, non-reactive dependencies, and empty scopes.
    • Scope Optimization: Merges co-invalidating scopes, prunes always-invalidating scopes, and handles early returns.
    • Codegen Preparation: Promotes temporaries to named variables, ensures unique variable names, and generates the final Babel AST.
    • Transformations: Optimizes props method calls, SSR-specific optimizations, JSX outlining, and pure function outlining.
    • Validation: Enforces rules such as Rules of Hooks, no setState during render, dependency array completeness, and component identity stability.

  10. Understand the React Compiler Rust Port progress and status

    main
    The React Compiler is undergoing a port from TypeScript to Rust. This documentation tracks the progress of the Rust port, specifically focusing on transformation passes, reactive pass implementation, and codegen application. The port aims to achieve parity with the TypeScript implementation in terms of test passing rates and code output accuracy.

  11. Scope of the Rust port testing infrastructure

    main

    The testing infrastructure is designed to validate the correctness of the Rust compiler implementation against the TypeScript reference.

    Supported (In Scope):

    • Testing all passes from lower through codegen.
    • Comparing HIR (High-level Intermediate Representation) debug output.
    • Comparing ReactiveFunction debug output.
    • Comparing error outputs (both thrown and accumulated errors).
    • Support for custom fixture directories and config pragma support.

    Not Supported (Initially):

    • Performance benchmarking.
    • Babel plugin integration testing (the Rust compiler is a standalone binary).
    • Direct testing of generated code (codegen output is tested by comparing its debug representation, not by execution).
    • Parallel test execution (fixtures run sequentially).
    • Watch mode.

  12. Understand the React Compiler Rust Port progress and transformation passes

    main

    The React Compiler is being ported from TypeScript to Rust. The porting process involves several transformation passes that operate on the High-Level Intermediate Representation (HIR). These passes are categorized into different stages, including analysis passes (e.g., AnalyseFunctions, InferMutationAliasingEffects) and HIR passes (e.g., PropagateScopeDependenciesHIR, AlignReactiveScopesToBlockScopesHIR).

    Key transformation stages include:

    • Analysis Passes: Compute effects, mutation aliasing, and reactive places.
    • HIR Passes: Manage reactive scopes, flatten loops, and propagate dependencies.
    • Validation Passes: Ensure correctness by checking for patterns like ValidateNoSetStateInRender or ValidateNoRefAccessInRender.