facebook/react

Features

• JSX Syntax - A syntax extension for JavaScript that allows developers to write HTML-like markup directly within their component functions for improved readability and developer experience.
• Component-Based Architectures - React components are reusable pieces of code that represent parts of a user interface, used to render, manage, and update UI elements in an application.
• Component Libraries - A core library providing hooks, built-in components, component-definition APIs, and directives for managing component behavior and server-side rendering instructions.
• Component Invocation Rules - React components must be invoked via JSX to enable framework-level features like state management, efficient reconciliation, tree introspection, and non-blocking rendering orchestration.
• Hook Enforcement Rules - Hooks must be invoked at the top level of React functions and never within loops, conditions, or nested functions to maintain consistent internal state tracking.
• Dependency Injection Containers - A mechanism for passing data deep through the component tree without manual prop drilling, supporting dynamic value updates and default fallback values for disconnected components.
• Component Boundary Directives - A module-level directive that marks code and its transitive dependencies for client-side execution, establishing a boundary between server-rendered and client-interactive components in the application.
• Component Rendering Lifecycles - React updates the user interface through a three-phase lifecycle consisting of triggering a render, executing component functions to calculate changes, and committing those changes to the DOM.
• DOM Rendering Utilities - A set of client-side rendering utilities that enable mounting React components into browser DOM nodes, including support for hydrating server-rendered HTML content.
• Automatic Memoization Compilers - The compiler automatically optimizes components that follow the Rules of React, while providing mechanisms to opt-out of compilation for components that rely on manual memoization patterns.
• Deferred Value Hooks - A hook that creates a deferred version of a value, allowing React to prioritize urgent updates while deprioritizing expensive re-renders or data-fetching operations in the background.
• Root Initialization Utilities - A root-creation utility that initializes a React root on a DOM element, supporting custom error-handling callbacks and identifier prefixes for multiple-root scenarios.
• Component Memoization - A component wrapper that skips re-rendering when parent components re-render, provided the component's props remain shallowly equal to their previous values.
• Memoization Hooks - Performance hooks provide mechanisms to cache expensive calculations, memoize function definitions, and prioritize UI updates to maintain responsiveness during heavy rendering tasks.
• Side Effect Management - Side effects must be performed outside of the render phase, typically within event handlers or effects, to ensure components remain pure and predictable during React's rendering process.
• Component-Driven Architectures - A systematic approach to building React applications by defining component hierarchies, managing minimal state, and implementing unidirectional data flow with inverse callbacks.
• Immutable State Patterns - React state objects should be treated as immutable, requiring developers to replace the entire object rather than mutating its properties to trigger component re-renders.
• Snapshot State Semantics - State updates in React act as snapshots, meaning state variables remain fixed during the execution of an event handler, regardless of subsequent updates within the same scope.
• State Lifting Patterns - State management pattern where shared data is moved to a common parent component to ensure a single source of truth and synchronized updates across multiple child components.
• Conditional Rendering Patterns - React components use standard JavaScript control flow statements like if-else and ternary operators to dynamically determine which JSX elements to render based on component state or props.
• Declarative UI Patterns - React promotes a declarative UI pattern where developers describe the desired visual state of components rather than manually manipulating individual DOM elements through imperative instructions.
• UI Tree Models - React models application structure using render trees for component relationships and module dependency trees for build-time bundling, aiding in performance optimization and data flow analysis.
• Hooks - Hooks are specialized functions that allow components to access React features like state, with strict rules requiring them to be called at the top level.
• Effect Synchronization Hooks - Effect hooks allow components to synchronize with external systems, including network requests, browser DOM manipulations, and third-party UI libraries.
• Property Passing - Components accept arbitrary data as props, which are read via object destructuring in the component function signature to customize rendering and behavior.
• Custom Hooks - Custom hooks allow developers to encapsulate and reuse stateful logic across multiple components by composing built-in hooks into specialized, reusable functions.
• Composition Patterns - Components can accept arbitrary JSX content through a reserved property, enabling the creation of flexible wrapper components that render nested children within defined layout slots.
• Pure Components - Writing components as pure functions, which avoid side effects and return consistent output for given inputs, helps ensure predictable behavior and simplifies debugging.
• Built-in UI Components - React provides several built-in components for grouping nodes, measuring performance, handling loading states, enabling development checks, and managing UI visibility state.
• Fragment Components - A grouping component that allows multiple elements to be returned or assigned without introducing additional DOM nodes, supporting optional keys for list rendering.
• HTML Element Wrappers - React provides built-in support for standard browser HTML and SVG elements, enabling developers to use them as components with additional React-specific props like refs and event handlers.
• Server Components - Server components allow rendering static or dynamic data directly within components, eliminating the need for client-side data fetching effects and reducing bundle sizes by excluding server-only dependencies.
• Streaming Rendering Utilities - A server-side rendering utility that streams React components as HTML to writable streams, supporting progressive loading, error recovery, and client-side hydration.
• Reducer State Management - A state management hook that centralizes complex update logic into a pure reducer function, separating the 'how' of state transitions from the 'what' of event handlers.
• State Management Hooks - State management hooks allow components to remember information and update it, either directly or through reducer functions for more complex state logic.
• State Update Queues - Developers can queue multiple state updates by passing an updater function to the state setter, ensuring each update correctly references the most recent state value.
• Serializable Components - Data passed from server-rendered components to client-interactive components must be serializable, including primitives, standard iterables, plain objects, server functions, and JSX elements.
• Component Purity Rules - The framework enforces component purity by requiring that side effects and non-deterministic operations like time retrieval are handled within lifecycle hooks rather than during the render phase.
• Effect Dependency Rules - The linter enforces that all reactive values used within effects are included in the dependency array to prevent stale closures and ensure consistent synchronization with component state.
• Build-Time Compilers - A build-time optimization tool that automatically memoizes components and values to improve application performance without manual intervention.
• Render-Time Data Transformations - React components should perform data transformations during rendering rather than using effects, which avoids unnecessary re-renders and improves performance by keeping logic at the top level.
• Compilation Directives - Restrict compilation to specific components and hooks by requiring an explicit directive at the top of functions, providing fine-grained control over which parts of the application are optimized.
• Compilation Optimization Strategies - The compiler provides multiple modes to determine which functions are optimized, including heuristic-based inference, explicit annotation, syntax-based detection, and global compilation of all top-level functions.
• Optimization Directives - Compiler directives are string literals placed at the start of modules or functions to explicitly opt code into or out of the React Compiler's optimization process.
• Transition State Managers - A hook that marks state updates as non-blocking transitions, allowing the UI to remain responsive while background work or data fetching completes.
• Environment Directives - Directives allow developers to explicitly define the execution environment for components and functions, enabling seamless interaction between client-side interfaces and server-side logic in modern web applications.
• State Structuring Principles - State management principles for React components include grouping related state, avoiding contradictions, eliminating redundant or duplicated data, and flattening deeply nested structures to simplify updates.
• List Renderers - Lists are rendered by transforming data arrays into collections of components using standard JavaScript iteration methods, requiring unique keys for efficient reconciliation.
• Ref Forwarding - A pattern for passing refs through component boundaries to allow parent components to interact with specific DOM elements rendered by child components.
• Event Handling Systems - React components support event handlers as props, allowing developers to trigger custom functions in response to user interactions like clicks, hovers, or form input changes.
• Suspense Boundaries - A component that displays a fallback UI while its children are loading, automatically switching back to the actual content once the data is ready.
• Resource Reading Hooks - A flexible hook for reading values from Promises or context, supporting conditional usage and integration with Suspense and Error Boundaries for asynchronous data handling.
• Synthetic Event Systems - React event handlers receive a synthetic event object that normalizes browser inconsistencies while providing access to the underlying native browser event.
• Hydration Utilities - A server-side rendering utility that resumes a previously prerendered React tree, outputting the result as a readable stream for final delivery to the client.
• Hydration Management - A root-level method to update a hydrated React component tree, allowing for dynamic UI updates after the initial server-rendered content has been attached.
• Server Component Memoization Utilities - A memoization utility for Server Components that caches function return values based on input arguments, automatically invalidating the cache at the end of each server request.
• Static Site Generation APIs - A static server-side generation API that renders React trees to HTML, waits for all Suspense-enabled data to load, and supports aborting with partial output.
• External Store Synchronization Hooks - A hook for subscribing to and reading values from external data stores or browser APIs, ensuring React components stay synchronized with mutable state outside of React.
• Mutable Ref Storages - Refs allow components to store mutable values that persist across renders without triggering re-renders, making them suitable for storing non-UI data like timers or DOM references.
• State Batching Mechanisms - React automatically batches multiple state updates within event handlers, processing them only after all code in the handler has finished executing to optimize rendering performance.
• Server Functions - Server functions allow client-side components to securely execute asynchronous server-side logic by invoking functions marked with a specific directive, enabling seamless communication between client and server.
• Component Inspection Tools - A browser extension that allows developers to inspect component trees, modify props and state, and diagnose performance issues within their applications.
• Development Validation Tools - A development-only wrapper component that enables additional checks for impure rendering, missing effect cleanup, missing ref cleanup, and usage of deprecated APIs to improve application reliability.
• Performance Profilers - A performance visualization tool that tracks task scheduling priorities, render phases, and effect execution timelines to help developers identify bottlenecks in component updates and lifecycle events.
• Static Analysis Plugins - A static analysis tool that enforces architectural rules for hooks to ensure code quality and prevent common runtime errors.
• Static Code Analysis - Code linters identify potential issues during development, with specific support for React-specific rules to catch common bugs early in the coding process.
• Type Definitions - Built-in React hooks include comprehensive type definitions that support automatic inference and explicit type arguments for complex state structures or union types.
• Static Analysis Rules - An ESLint plugin identifies code violating the Rules of React, helping developers pinpoint components that cannot be automatically optimized by the compiler.
• Component Architecture Linters - The linting rule enforces that components are defined outside of other components to prevent unnecessary re-renders and ensure components remain reusable and testable.
• Compiler Configurations - The compiler provides granular control through configuration options, function-level directives for compilation management, and support for shipping pre-compiled libraries to ensure compatibility and performance.
• Compiler Plugins - Library authors can pre-compile code using a Babel plugin to provide performance optimizations and consistent behavior to end-users without requiring additional configuration in their build setups.
• Class Components - A base class for defining React components using class syntax, requiring a render method and supporting optional lifecycle methods, state, and context.
• Children Utilities - A collection of utilities for mapping, counting, iterating, and converting opaque children data structures into flat arrays of elements with automatically assigned keys.
• Element Utilities - A collection of low-level utilities for creating, cloning, and validating React element objects, serving as an alternative to JSX for defining component types and properties.
• Lazy Component Loading - A component-level code-splitting utility that defers loading of modules until they are rendered, requiring a suspense boundary to handle the loading state during the asynchronous import process.
• DOM Manipulation Utilities - A set of utilities for DOM manipulation, including rendering components into different DOM tree locations and forcing synchronous state updates to the DOM.
• DOM References - The ref attribute supports callback functions that receive the DOM node on mount and provide a cleanup function for unmount or re-render scenarios.
• Controlled Form Components - React form components support controlled state management, where passing a value prop allows the component to be driven by a state variable rather than internal browser state.
• Form Action Handlers - The form component supports function-based actions for client-side handling, server-side execution, and automatic transition management for improved interactivity and progressive enhancement.
• Insertion Effect Hooks - A specialized hook for injecting DOM elements like style tags before layout effects fire, ensuring style injection occurs at the optimal point in the component lifecycle.
• Utility Hooks - Utility hooks provide specialized capabilities for library authors, including debugging labels, unique ID generation, external store synchronization, and action state management.
• State Preservation Controls - React preserves component state based on its position in the tree, allowing developers to control state persistence or reset it when components are re-rendered or swapped.
• Full-Stack Architectures - React-recommended frameworks provide integrated support for client-side rendering, static-site generation, and optional server-side rendering on a per-route basis for scalable production applications.