react changelog

Here's the latest scoop on what's been cooking in the code kitchen! We've got some bug fixes, new features, and improvements that are sure to spice up your development experience. Check out the highlights below! 🌟

  • Bugfix: Compiler Gets a Brain Boost! 🧠 We squashed some pesky bugs in the compiler related to no-deriving-state-in-effects. The derivationCache graph got a makeover, making it smarter at tracking where values come from. Plus, we introduced a Data Flow Tree that gives you a visual on data derivation, making debugging a breeze!

  • Bugfix: Byte Streams No Longer a Byte-Sized Headache! 🔧 Fixed a critical issue in React Flight Client where ReadableStream({type: 'bytes'}) instances would stall after the first chunk. We ensured that byte stream chunks are copied before enqueueing to prevent buffer detachment. Now, byte streams flow smoothly like a river!

  • Bugfix: Infinite Loops? Not on Our Watch! 🔄 Addressed an issue in the compiler's derivation cache to prevent infinite loops during effect mutations. We now compare snapshots of the derivationCache, ensuring changes are accurately tracked. No more endless spinning!

  • Bugfix: Portals Play Hide and Seek! 🌀 Updated the Activity component so when it's hidden, it also hides the contents of any portals. This aligns portal visibility with React's lifecycle, making sure portals don't play peek-a-boo when they shouldn't!

  • New Feature: Source Location Validator Joins the Party! 🎉 Introducing a new source location validator for the compiler to tackle coverage report chaos. It checks that important source locations are preserved post-compilation. Though it's not perfect, it's a handy tool for the test suite!

  • Improvement: Preambles Get a Makeover! ✨ Unifying preamble fields in the SuspenseBoundary to save space and simplify the code. This change streamlines the handling of preamble states, making the code leaner and meaner!

  • Improvement: DevTools Get Double Click Delight! 🖱️ Enhanced React DevTools with an Activity slice filter that activates on double-click. New components and styling make filtering activity data a snap, improving the overall DevTools experience!

These updates are all about making your coding life easier and more efficient. Dive in and enjoy the new features and fixes! 🚀

Included Commits

2025-11-07T14:19:19 See commit

This commit, titled "Unify preamble only fields to save a field," focuses on simplifying the structure of the SuspenseBoundary in the React framework. It consolidates the separate fields for content and fallback preambles into a single "preamble" field, as the scenario where a preamble is utilized is relatively uncommon. By merging these fields, the codebase is streamlined, reducing redundancy and improving maintainability. The changes involve modifications across multiple files, primarily in ReactFizzServer.js, with a net addition of 31 lines and a deletion of 29 lines, resulting in a total of 60 changes.

The commit is part of a series of improvements aimed at optimizing the handling of preambles in the rendering process for Suspense boundaries. The new structure allows for a more cohesive representation of preamble states, encapsulating both content and fallback states within a single object. This change not only enhances code clarity but also aligns with the overarching goal of improving the efficiency of React's rendering mechanisms. The commit builds upon previous work, specifically stacked on another commit (#35067), indicating a progressive refinement in the handling of Suspense boundaries.

Files changed

  • packages/react-server/src/ReactFizzServer.js
2025-11-08T17:09:44 See commit

This commit introduces enhancements to the React DevTools by implementing an Activity slice filter that activates upon double-clicking an Activity. Key modifications include the addition of new components such as ActivitySlice.js and ActivityList.js, which facilitate the filtering and display of activity data. Existing files, including renderer and various component views, were updated to integrate this new functionality, ensuring a seamless user experience when interacting with activity data.

Additionally, the commit includes changes to CSS files for styling the new components and adjustments to the testing framework to accommodate the new features. The removal of SuspenseTreeList.js indicates a possible refactoring or reorganization of the components related to suspense handling. Overall, these updates aim to enhance the usability and functionality of the React DevTools, making it easier for developers to analyze and filter activity data effectively.

Files changed

  • packages/react-devtools-shared/src/__tests__/store-test.js
  • packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
  • packages/react-devtools-shared/src/__tests__/utils.js
  • packages/react-devtools-shared/src/backend/fiber/renderer.js
  • packages/react-devtools-shared/src/constants.js
  • packages/react-devtools-shared/src/devtools/store.js
  • packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.css
  • packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.js
  • packages/react-devtools-shared/src/devtools/views/Components/Element.js
  • packages/react-devtools-shared/src/devtools/views/Components/Tree.js
  • packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
  • packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
  • packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
  • packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.css
  • packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.js
  • packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
  • packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
  • packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeList.js
  • packages/react-devtools-shared/src/frontend/types.js
  • packages/react-devtools-shared/src/utils.js
  • packages/react-devtools-shell/src/app/Segments/index.js
  • packages/react-devtools-shell/src/app/index.js
2025-11-10T15:42:26 See commit

This commit addresses the behavior of the Activity component in React, specifically ensuring that when an Activity is hidden, it also hides the contents of any portals contained within it. Previously, it was left to userspace code to manage the visibility of portal contents, which could lead to inconsistencies since portals exist outside the normal DOM hierarchy. By implementing this change, the visibility of portal contents is now automatically managed by React, aligning with its lifecycle and enhancing the user experience.

To optimize the process, a new flag called PortalStatic has been introduced, allowing React to efficiently identify and manage subtrees that contain portals. This change involves modifications across various files, including updates to the logic for hiding and unhiding children within the React reconciliation process. The adjustments ensure that when an Activity boundary is hidden, all nested portal contents are also appropriately hidden, regardless of their depth in the component tree. This improves the consistency and reliability of rendering in React applications that utilize portals.

Files changed

  • packages/react-dom/src/__tests__/ReactDOMActivity-test.js
  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberCompleteWork.js
  • packages/react-reconciler/src/ReactFiberFlags.js
2025-11-10T20:08:05 See commit

This commit addresses an issue in the compiler's derivation cache system by preventing the overriding of derivationEntry during effect mutations. Instead, it introduces a mechanism to update the typeOfValue while ensuring that the integrity of the cache is maintained. The changes involve taking a snapshot of the derivationCache after recording all derivations in the High Intermediate Representation (HIR) and comparing it with the new changes to detect any modifications. This approach effectively mitigates the risk of infinite loops that were previously encountered when utilizing derived computations within effects.

Additionally, the commit includes a test case to validate the fix, demonstrating that the updated implementation no longer triggers an infinite loop when the Component function is executed with specific inputs. The modifications enhance the robustness of the cache system by ensuring that changes are accurately tracked and managed, thus improving the overall reliability of the compiler's behavior in managing derived computations.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts
2025-11-10T20:09:13 See commit

The recent commit addresses several issues within the compiler related to the no-deriving-state-in-effects functionality by overhauling the derivationCache graph. This restructuring resolves various bugs that previously caused the compiler to inaccurately track the source of derived values from props or state. The new implementation not only improves tracking accuracy but also introduces a Data Flow Tree feature, which provides a visual representation of how data is derived. This enhancement is expected to simplify the process of debugging complex components by offering clearer insights into data dependencies.

In addition to the structural changes, the commit includes a test plan that introduces new test cases to validate the changes, particularly focusing on scenarios where derivations were previously not tracked correctly. Existing tests have also been updated to incorporate the new error messages that include the Data Flow Tree, ensuring comprehensive coverage and functionality verification of the updated compiler features.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-setter-ternary.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-setter-ternary.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md
2025-11-13T03:02:46 See commit

This commit introduces a new source location validator for the compiler, aimed at addressing issues with Jest coverage reports that arise when important source locations are lost after the compilation process. The validator works by traversing the original Abstract Syntax Tree (AST) to collect source locations of key node types and then checking the generated AST to ensure these locations are preserved. If any important locations are missing, it generates errors to help identify discrepancies that could lead to inaccurate coverage reports. The validator is designed primarily for use in unit tests rather than production, acknowledging some limitations, such as the need for careful test fixture management and the potential for false negatives when nodes are optimized away by the compiler.

The implementation includes a new validation function that captures the necessary source location details and checks them against the output of the compilation process. It also adds a configuration option to enable this validation in the compiler environment. While the approach has some drawbacks—such as the strict requirement for exact location matching and the complexity introduced by various node transformations—it is considered a practical solution to improve the accuracy of coverage tracking in the test suite. The commit includes modifications to the validation logic, the compiler pipeline, and the addition of test cases to validate the new functionality.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
  • compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateSourceLocations.ts
  • compiler/packages/babel-plugin-react-compiler/src/Validation/index.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.js
2025-11-13T20:23:02 See commit

This commit addresses a significant bug in the React Flight Client related to the parsing of ReadableStream({type: 'bytes'}) instances, which would stall after reading only the initial chunks when used within React Server Components (RSC). The problem arose because the underlying ArrayBuffer was being detached when chunks were enqueued to the ReadableByteStreamController, disrupting the subsequent parsing of the RSC stream. The issue was initially obscured by the use of the web-streams-polyfill in testing, but became evident with native Web Streams implementations.

To resolve this issue, the commit introduces a solution that involves copying the byte stream chunks before enqueuing them, thus preventing any detachment of shared buffers from impacting further parsing. Additionally, a new protocol tag 'b' is implemented specifically for byte stream chunks, allowing the server to emit these chunks correctly. The changes also include immediate enqueuing of parsed byte stream chunks, along with a shift in testing methodology to utilize native Web Streams, ensuring that the fix is adequately validated. Overall, this update enhances the stability and performance of the byte stream handling in React's server-client architecture.

Files changed

  • packages/react-client/src/ReactFlightClient.js
  • packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMEdge-test.js
  • packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMReplyEdge-test.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReplyEdge-test.js
  • packages/react-server/src/ReactFlightServer.js