react changelog

Here's a roundup of the latest changes that have been whipped up in our codebase. From performance boosts to nifty new features and bug fixes, we've got it all covered. Let's dive in! 🏊‍♂️

New feature: Debug Channel for Stateful Connections
Introducing a shiny new Debug Channel option that keeps the Flight Client and Server in sync with a stateful connection in development mode. This allows the server to retain depth-limited objects for future requests, ensuring referential identity is preserved. While this version focuses on client-to-server messaging, plans are in place to enable server-to-client communication for transmitting debug information. 🚀

New feature: Parent Stack Location from Child's Owner Stack
We've added the ability to retrieve function locations for parent stacks of Server Components using their owned child's location. This efficient method enhances error tracking and debugging capabilities by providing source locations without additional costs. Now, when a child component is owned by a parent, the parent's debug location can be inferred from the child's stack. 🔍

Improvement: Serialize Functions by Reference
We've tackled the issue of hefty React Server Components (RSC) payloads on pages with many server components. By serializing functions by reference, similar to objects, we've slashed payload sizes and reduced eval commands significantly. This change speeds up development page load and hydration times, making for a snappier experience. ⚡️

Improvement: Debugging with Resolved Promises
Enhancing the Flight framework's debugging prowess, resolved Promise values can now be sent to the client and displayed in the UI. Rejected I/O operations, along with error messages, are also shown. This is achieved by retaining Promises longer using WeakRefs and WeakMaps, ensuring that the displayed values come from the first-party context. 🛠️

Improvement: Logging Aborted Operations
We've improved logging to handle aborted await operations and component renders, ensuring clearer insights into the rendering process. This includes new logging functions to track aborted operations, capturing relevant performance metrics and contextual information. 📊

Bugfix: Function Param Destructuring
Fixed a bug related to reassigning function parameters during destructuring in the React compiler. The update ensures correct handling of parameters, enhancing the compiler's reliability in processing complex destructuring patterns. 🐞

Bugfix: Handling Missing Content Nodes
Addressed an issue in the React DOM bindings where the revealCompletedBoundaries function now checks if the contentNode's parent node is null before removing it. This prevents errors when the content node is prematurely deleted, improving the rendering process's robustness. 🛡️

Bugfix: Memory Leak in DebugNode
Resolved a memory leak in DebugNode by eagerly parsing stack traces. Although this may slow down performance temporarily, it prevents indefinite memory leaks by processing stack traces immediately. Future optimizations are planned to selectively handle only the needed stack traces. 🧠

Chore: Function Renaming
We've tidied up some names by renaming serializeConsoleMap and serializeConsoleSet to serializeDebugMap and serializeDebugSet, keeping things consistent and clear across the codebase. 🧹

That's all for now, folks! Keep an eye out for more updates as we continue to polish and enhance our code. Happy coding! 🎉

Included Commits

2025-06-20T12:21:57 See commit

The commit titled "Ignore error if content node is gone before reveal" addresses a potential issue in the React DOM bindings related to the rendering process of components. The primary change involves modifying the logic in the revealCompletedBoundaries function to check if the contentNode's parent node is null before attempting to remove it from the DOM. This adjustment is crucial because it allows the system to gracefully handle scenarios where the client-side hydration has failed, resulting in the content node being deleted prematurely, or when the server has emitted a completion instruction that cancels the segment.

By implementing this check, the code ensures that if the contentNode is no longer present, the operation can be ignored without throwing an error. This enhances the robustness of the rendering process, particularly in cases where components are dynamically loaded or updated, thereby improving the overall stability and user experience of React applications. The commit includes modifications in two files, with careful handling of the DOM elements involved in the rendering process.

Files changed

  • packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js
  • packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js
2025-06-20T17:36:07 See commit

This commit addresses the issue of excessively large React Server Components (RSC) payloads that occur on pages with numerous server components, particularly in scenarios like syntax highlighting. The author observed that a documentation page's payload reached 13.8 MB, primarily due to the repetitive serialization of function components over 4,000 times. To mitigate this, the commit introduces a method of serializing functions by reference, similar to existing practices for objects. This change significantly reduces the payload size from 13.8 MB to 4.6 MB and decreases the number of eval commands from over 4,000 to just 31, leading to improved development page load and hydration times—from 4 seconds down to 1.5 seconds.

The implementation involves modifying the serialization process in both the React Flight client and server files. The new approach checks if a function has already been serialized and, if so, refers to its existing reference rather than re-serializing it. This not only optimizes performance by reducing redundant data but also ensures that the deserialized functions maintain reference equality, consistent with their server-side counterparts. The changes include updates to the test file and the core serialization logic, enhancing the efficiency of the rendering process in React applications.

Files changed

  • packages/react-client/src/__tests__/ReactFlight-test.js
  • packages/react-server/src/ReactFlightServer.js
2025-06-21T14:36:07 See commit

This commit focuses on renaming two functions, serializeConsoleMap and serializeConsoleSet, to serializeDebugMap and serializeDebugSet, respectively. This change is a follow-up to a previous commit (#33583) where the developer realized that these functions were overlooked during the initial renaming process.

The modifications were made in the ReactFlightServer.js file within the packages/react-server/src directory, involving a total of 8 changes, including 4 additions and 4 deletions. The renamed functions are used for serializing Map and Set data structures in the context of debugging, ensuring consistency and clarity in the function names throughout the codebase.

Files changed

  • packages/react-server/src/ReactFlightServer.js
2025-06-22T14:40:33 See commit

This commit addresses a memory leak issue in the DebugNode component of React, specifically related to the handling of Error objects that retain their call stacks, which can include Promises. The leak occurs because if these Promises are retained, their destroy async hooks are never triggered, preventing the cleanup of associated maps that hold the Error objects. To resolve this, the commit implements an eager parsing of stack traces, converting the Error objects into a more manageable ReactStackTrace type. This change aims to eliminate the indefinite memory leak by ensuring that the stack traces are processed immediately.

While this fix is expected to slow down performance due to the increased number of Promises being processed, it is seen as a necessary step to prevent memory issues. Future optimizations are anticipated to improve performance by selectively handling only the stack traces that are truly needed. The commit involves modifications across several files, including adjustments to type definitions and the initialization of async debug information, to accommodate the new stack trace handling mechanism.

Files changed

  • packages/react-server/src/ReactFlightAsyncSequence.js
  • packages/react-server/src/ReactFlightServer.js
  • packages/react-server/src/ReactFlightServerConfigDebugNode.js
2025-06-23T14:12:45 See commit

This commit enhances the debugging capabilities of the Flight framework by allowing the resolved values of Promises to be sent to the client, which can now be displayed in the user interface. It also provides the ability to show rejected I/O operations, along with their corresponding error messages, improving the visibility of asynchronous operations and their outcomes. To achieve this, the commit introduces a mechanism to retain Promises longer, using WeakRefs and a WeakMap to prevent garbage collection until all dependent Promises have resolved.

Additionally, the changes ensure that the displayed values come from the first-party context, avoiding internal implementations of third-party functions. This is accomplished by modifying the logic to identify the first await that occurs in user space, allowing the system to log relevant objects like the actual Response from a fetch() call instead of internal representations. The commit includes modifications across various files in the React Flight codebase, enhancing both functionality and debugging insights for developers.

Files changed

  • fixtures/flight/src/App.js
  • packages/react-client/src/ReactFlightClient.js
  • packages/react-client/src/ReactFlightPerformanceTrack.js
  • packages/react-client/src/ReactFlightPropertyAccess.js
  • packages/react-server/src/ReactFlightAsyncSequence.js
  • packages/react-server/src/ReactFlightServer.js
  • packages/react-server/src/ReactFlightServerConfigDebugNode.js
  • packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js
  • packages/shared/ReactTypes.js
2025-06-24T15:16:09 See commit

This commit introduces a new Debug Channel option for establishing a stateful connection between the Flight Client and Flight Server in development mode. The implementation allows the Flight Server to maintain an open connection to the client as long as the client remains active and additional data is available. This approach enables the server to retain depth-limited objects for future requests, although the current implementation only releases objects upon discovery without fully implementing lazy loading. The design ensures that each request has its own dedicated channel, preserving referential identity and allowing the client to reference previously written objects.

Additionally, the commit sets up a WebSocket for each request, although other multiplexing options are possible. While this version focuses on client-to-server messaging, there are plans to enhance the Debug Channel to allow server-to-client communication, enabling the transmission of debug information. The changes affect various files across multiple packages, reflecting a significant update to the Flight framework's data handling capabilities.

Files changed

  • fixtures/flight/server/global.js
  • fixtures/flight/server/region.js
  • fixtures/flight/src/App.js
  • fixtures/flight/src/index.js
  • packages/react-client/src/ReactFlightClient.js
  • packages/react-client/src/__tests__/ReactFlightDebugChannel-test.js
  • packages/react-markup/src/ReactMarkupServer.js
  • packages/react-noop-renderer/src/ReactNoopFlightClient.js
  • packages/react-noop-renderer/src/ReactNoopFlightServer.js
  • packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
  • packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
  • packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js
  • packages/react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js
  • packages/react-server-dom-parcel/src/server/ReactFlightDOMServerEdge.js
  • packages/react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js
  • packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
  • packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
  • packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
  • packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
  • packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
  • packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
  • packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
  • packages/react-server/src/ReactFlightServer.js
  • scripts/error-codes/codes.json
2025-06-24T20:35:28 See commit

This commit introduces a feature that enables the retrieval of the function location for parent stacks of Server Components based on the location of their owned children. By utilizing a method similar to a previous commit, it provides an efficient way to include source locations without incurring additional costs. The implementation ensures that when a child component is owned by a parent, the parent's debug location can be inferred from the child's stack, enhancing error tracking and debugging capabilities.

Changes made in the codebase involve modifications across several files, primarily focusing on adding the debugLocation property to relevant data structures and adjusting functions to accommodate this new information. This allows for improved stack trace reporting, particularly in scenarios where components throw errors, as the system can now provide a more accurate context of where the error originated. The commit also includes updates to tests to ensure that the new functionality is properly validated.

Files changed

  • packages/react-client/src/ReactFlightClient.js
  • packages/react-client/src/__tests__/ReactFlight-test.js
  • packages/react-devtools-shared/src/backend/fiber/renderer.js
  • packages/react-reconciler/src/ReactFiberComponentStack.js
  • packages/react-server/src/ReactFizzComponentStack.js
  • packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js
  • packages/shared/ReactComponentStackFrame.js
  • packages/shared/ReactTypes.js
2025-06-25T18:10:09 See commit

This commit addresses a bug related to reassigning function parameters within destructuring assignments in the React compiler. Specifically, it resolves issues with the ExtractScopeDeclarationsFromDestructuring function and the code generation process when a function parameter is reassigned. The changes involve modifying the handling of parameters in the codegenReactiveFunction and extractScopeDeclarationsFromDestructuring functions to ensure that the correct identifiers are declared and managed within the compiler's scope.

Additionally, the commit includes the addition of test cases that demonstrate the bug and verify the fix. These tests feature a component that utilizes destructuring and reassignment of props, confirming that the updated code correctly processes these scenarios without errors. Overall, this update enhances the reliability of the compiler in handling complex destructuring patterns involving function parameters.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/ExtractScopeDeclarationsFromDestructuring.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-props.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-props.js
2025-06-25T20:28:54 See commit

This commit introduces logging enhancements to handle aborted await operations and component renders in the React Flight framework. It addresses a situation where I/O entries were not marked as aborted in the Server Request track, as their end times were inaccurately represented. The changes ensure that if an operation is aborted before completion, it is correctly logged as such, providing clearer insights into the rendering process. New logging functions, logComponentAborted and logComponentAwaitAborted, have been added to track these aborted operations, capturing relevant performance metrics and contextual information.

The modifications also include adjustments in the handling of end times for requests and tasks, ensuring that aborted operations do not emit incorrect end times. This is critical for accurately reflecting the state of operations during rendering and improving overall performance tracking. The commit enhances the developer experience by providing better debugging capabilities, allowing developers to identify and address issues related to aborted renders and awaited operations effectively.

Files changed

  • packages/react-client/src/ReactFlightClient.js
  • packages/react-client/src/ReactFlightPerformanceTrack.js
  • packages/react-server/src/ReactFlightServer.js