react changelog

Here's the latest scoop on our updates! 🚀 We've been cooking up some exciting new features and squashing pesky bugs to make everything run smoother than ever. Dive in to see what's new and improved:

  • New feature: Transition Indicator Fun! 🎉 We've rolled out onDefaultTransitionIndicator to jazz up the React Fiber architecture. It's all about making transitions smoother by scheduling updates and tracking mutations. This means you'll see more accurate loading states without unnecessary indicators popping up. Plus, multiple transitions can now party together without interruption!

  • Improvement: Clean Up Those Shadow Nodes! 🧹 We're tackling memory management like pros by cleaning up old shadow nodes in fiber.alternate.stateNode sooner. This fix ensures that resources, especially those image-heavy ones, aren't hogging memory longer than needed. Say goodbye to unnecessary clutter!

  • New feature: Browser Spinner Magic! 🔄 Our DOM renderer now has a default transition indicator backed by the Navigation API. This means that during transitions, you'll see the browser's native loading spinner in action—at least in Chrome for now. It's all about keeping things visually consistent and smooth.

  • Improvement: Async Action Indicators! ⏳ We've added a default loading indicator for those tricky async transitions that don't have an immediate root association. Now, async actions get the attention they deserve, ensuring that loading indicators behave correctly even when things get a bit tangled.

  • New feature: ViewTransition Annotations! 🏷️ With the introduction of vt- prefixed attributes, <ViewTransition> elements are now more manageable. These annotations help with CSS targeting and streamline the transition process, making sure everything's in tip-top shape during those dynamic content reveals.

  • New feature: Plumbing for Transition Indicators! 🚰 We've laid the groundwork for handling default transition indicators, adding options at the root level. While it doesn't do much yet, it's a crucial step towards a more integrated and seamless experience.

  • New feature: Fizz Blocking Render! ⚡ Our experimental channel now supports gating rel="expect" behind enableFizzBlockingRender. It's all about enforcing critical HTML semantics to ensure smooth sailing during rendering.

  • Bugfix: Noop Detection for Xplat Syncs! 🛠️ We've fixed an issue with noop detection for cross-platform syncs. By ignoring changes to eslint-plugin-react-hooks/package.json, we've streamlined the sync process and avoided unnecessary actions.

  • Bugfix: Compiler Edge Cases! 🧩 We've tackled edge cases related to noEmit and module scope opt-outs in the Babel plugin. This fix ensures that the compiler behaves as expected, enhancing the overall developer experience.

  • Chore: Bye-Bye Stray File! 🗑️ We found a stray file lurking in the codebase and gave it the boot. It's all part of keeping things neat and tidy around here!

And that's a wrap on our latest updates! Stay tuned for more improvements and happy coding! 🎈

Included Commits

2025-05-09T00:42:50 See commit

The commit titled "Add plumbing for onDefaultTransitionIndicator" introduces foundational support for a new feature related to handling default transition indicators within the React framework. This update primarily involves adding options at the root level and connecting them, although the feature itself is not yet functional. A new function called defaultOnDefaultTransitionIndicator has been created, which currently serves as a no-operation (noop) placeholder, indicating that the implementation is still pending.

Several files across the React ecosystem have been modified to accommodate this change, including updates to the ReactART, ReactDOM, ReactNative, and ReactTestRenderer packages. These modifications include the introduction of default transition indicator options in various root creation functions and error handling mechanisms, ensuring that the new feature can be integrated into the existing architecture when it is fully developed. Additionally, feature flags have been updated to manage the state of this new functionality, indicating that it is still experimental and not enabled by default.

Files changed

  • packages/react-art/src/ReactART.js
  • packages/react-dom/src/client/ReactDOMRoot.js
  • packages/react-dom/src/client/ReactDOMRootFB.js
  • packages/react-native-renderer/src/ReactFabric.js
  • packages/react-native-renderer/src/ReactNativeRenderer.js
  • packages/react-noop-renderer/src/createReactNoop.js
  • packages/react-reconciler/src/ReactFiberReconciler.js
  • packages/react-reconciler/src/ReactFiberRoot.js
  • packages/react-reconciler/src/ReactInternalTypes.js
  • packages/react-test-renderer/src/ReactTestRenderer.js
  • packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
  • packages/shared/ReactFeatureFlags.js
  • packages/shared/forks/ReactFeatureFlags.native-fb.js
  • packages/shared/forks/ReactFeatureFlags.native-oss.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
  • packages/shared/forks/ReactFeatureFlags.www.js
2025-05-09T17:37:49 See commit

This commit addresses specific edge cases related to the noEmit option and module scope opt-outs in the Babel plugin for React. It introduces a new boolean property, hasModuleScopeOptOut, within the ProgramContext to track whether a module-level opt-out directive is present. The changes ensure that if such an opt-out is detected, the compiler will not proceed with function compilation and will log an error if any compiled functions are found, thus preventing unexpected behavior.

Additionally, the commit modifies the handling of the noEmit directive to ensure that the compiler performs validation without altering the Babel AST, allowing it to flag unused directives. The overall goal is to enhance the compiler's robustness by correctly managing different configurations and directives, thereby improving the developer experience when using the Babel plugin in React applications.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Imports.ts
  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-bailout-nopanic-shouldnt-outline.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-noemit.expect.md
2025-05-12T16:39:20 See commit

This commit introduces a fix to address an issue in React where old shadow nodes are retained longer than necessary, which can lead to inefficient memory usage. Specifically, when React updates a shadow tree, the previous shadow nodes are stored in fiber.alternate.stateNode and are not cleared until a node is cloned again. This can be problematic, particularly when a subtree is deleted, as it results in retaining the entire subtree, including resources like images, until the next update. The added feature flag enableEagerAlternateStateNodeCleanup allows React to proactively update alternate.stateNode to point to the new shadow node, thereby releasing resources more efficiently.

The implementation of this fix has been verified against existing React Native tests, confirming that it resolves the identified issue without breaking any existing functionality. The changes primarily involve modifications to the ReactFiberCommitWork.js file and the addition of the new feature flag across several configuration files. This enhancement not only improves memory management but also ensures that React's behavior aligns with expected performance standards during updates.

Files changed

  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/shared/ReactFeatureFlags.js
  • packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
  • packages/shared/forks/ReactFeatureFlags.native-fb.js
  • packages/shared/forks/ReactFeatureFlags.native-oss.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
  • packages/shared/forks/ReactFeatureFlags.www.js
2025-05-13T14:17:53 See commit

The recent commit titled "[Fizz] Gate rel='expect' behind enableFizzBlockingRender" introduces a significant update to the React framework, particularly in the handling of HTML semantics related to Fizz, which is a rendering engine for React. This change, now enabled in the experimental channel, emphasizes the importance of enforcing critical semantics at the HTML level to ensure explicit boundaries can be established after rendering. The commit notes that this feature may require a major release for proper integration and upgrading.

In terms of technical adjustments, multiple files across the React DOM and server packages have been modified, including various test files that ensure the functionality of the new feature. These changes reflect a comprehensive effort to support the new gating mechanism for rel='expect', impacting both the core libraries and their testing frameworks. The update is part of ongoing enhancements aimed at improving the rendering capabilities and semantics of React applications.

Files changed

  • packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServerEdge-test.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
  • packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
  • packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
  • packages/react-dom/src/__tests__/ReactDOMFloat-test.js
  • packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js
  • packages/react-dom/src/__tests__/ReactRenderDocument-test.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
  • packages/shared/ReactFeatureFlags.js
  • packages/shared/forks/ReactFeatureFlags.native-fb.js
  • packages/shared/forks/ReactFeatureFlags.native-oss.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
  • packages/shared/forks/ReactFeatureFlags.www.js
2025-05-13T19:45:11 See commit

This commit introduces the onDefaultTransitionIndicator functionality within the React Fiber architecture, aimed at improving the handling of transition indicators during rendering. The implementation begins by scheduling transition updates that require indicator lanes in the markRootUpdated function, which tracks the necessary lanes for transitions. During commit phases, the system monitors mutations to determine whether a sync or default commit has occurred, allowing for the clearing of indicator lanes associated with the current event transition if any mutations are detected. This ensures that the loading state is accurately reflected for ongoing transitions without prematurely triggering default indicators.

Additionally, the commit outlines a structured process for managing indicator lanes throughout the transition lifecycle. By invoking onDefaultTransitionIndicator at the end of the processRootScheduleInMicrotask, it ensures that transitions can be initiated without restarting the loading indicator each time, allowing for multiple transitions to occur concurrently. The commit also notes several follow-up tasks, including addressing issues with default updates and handling async actions, as well as plans to implement a built-in DOM version of the indicator by default. Overall, this update enhances the user experience by providing a more responsive and accurate transition indicator system.

Files changed

  • packages/react-noop-renderer/src/createReactNoop.js
  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberLane.js
  • packages/react-reconciler/src/ReactFiberMutationTracking.js
  • packages/react-reconciler/src/ReactFiberRoot.js
  • packages/react-reconciler/src/ReactFiberRootScheduler.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
  • packages/react-reconciler/src/ReactInternalTypes.js
  • packages/react-reconciler/src/__tests__/ReactDefaultTransitionIndicator-test.js
2025-05-13T20:00:38 See commit

This commit introduces a default transition indicator for the DOM renderer by implementing a Navigation API-backed mechanism that simulates navigation events during transitions. When the onDefaultTransitionIndicator function is not overridden, a fake navigation event is triggered, which allows the browser to display its native loading spinner during transitions, particularly in Chrome. The implementation ensures that this fake navigation does not interfere with any ongoing navigations and handles interruptions gracefully by waiting for current transitions to complete before initiating a new one.

Additionally, the commit includes modifications to various files, incorporating a new ReactDOMDefaultTransitionIndicator module to manage the navigation events, along with updates to other components and actions to support loading states during transitions. The changes also ensure compatibility with existing routers on the page by providing a specific string in the navigation event's info field, allowing them to recognize and appropriately handle these simulated navigations without triggering unnecessary refetches.

Files changed

  • .eslintrc.js
  • fixtures/flight/src/actions.js
  • fixtures/view-transition/src/components/Page.js
  • packages/react-dom/src/client/ReactDOMDefaultTransitionIndicator.js
  • packages/react-dom/src/client/ReactDOMRoot.js
  • scripts/flow/environment.js
  • scripts/rollup/validate/eslintrc.cjs.js
  • scripts/rollup/validate/eslintrc.cjs2015.js
  • scripts/rollup/validate/eslintrc.esm.js
  • scripts/rollup/validate/eslintrc.fb.js
  • scripts/rollup/validate/eslintrc.rn.js
2025-05-13T20:10:28 See commit

This commit introduces a mechanism to trigger a default loading indicator for isomorphic asynchronous actions in React, particularly when using React.startTransition without an associated root due to the absence of immediate state updates. The newly implemented functionality ensures that if an async transition is initiated and there are no synchronous updates before the event concludes, a default indicator is displayed until the async action either completes or is entangled with other roots. This is managed through the use of various flags and functions to track the state of the indicator and its association with the roots.

The changes include modifications to several files, such as ReactFiberAsyncAction.js, which now contains logic for managing the default indicator's lifecycle and entangling async actions with the appropriate roots. New functions have been added to handle registration, starting, and stopping of the indicator, ensuring that it operates correctly in scenarios with multiple roots or pending transitions. The commit also includes tests to verify that the default indicator behaves as expected under various conditions, ensuring robust performance and user experience during async transitions in React applications.

Files changed

  • fixtures/view-transition/src/components/Page.js
  • packages/react-reconciler/src/ReactFiberAsyncAction.js
  • packages/react-reconciler/src/ReactFiberReconciler.js
  • packages/react-reconciler/src/ReactFiberRootScheduler.js
  • packages/react-reconciler/src/__tests__/ReactDefaultTransitionIndicator-test.js
2025-05-14T15:27:36 See commit

The commit titled "Delete stray file (#33199)" involves the removal of an unnecessary file from the project repository. The file in question, located in the Babel plugin's test fixtures, contained examples of JavaScript code related to object method shorthand. It appears that the file was not being used or was mistakenly included, leading to its deletion.

The changes made in this commit include the removal of 47 lines of code without any additions. The deleted content featured an input example and its corresponding code, which defined a Component function and an object with a method that utilized a mutate function. Ultimately, the commit cleans up the codebase by eliminating this stray file, streamlining the project's file structure.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-3.expect.md~051f3e57 ([hir] Do not memoize object methods separately)
2025-05-15T05:04:10 See commit

This commit introduces vt- prefixed attributes to annotate <ViewTransition> elements in HTML, enhancing the Fizz runtime's ability to manage animations when Suspense boundaries are revealed during streaming. The new attributes, such as vt-name, vt-update, vt-enter, vt-exit, and vt-share, allow the runtime to configure and apply transitions effectively while ensuring that these virtual nodes remain distinct from user-defined attributes. By converting <ViewTransition> components into corresponding HTML elements with these attributes, the commit facilitates CSS targeting and query selection for non-JavaScript transitions, while also accounting for various scenarios where transitions might be applicable or not.

The commit also addresses the need to minimize the number of annotations included, as certain triggers are only relevant in specific contexts, such as within Suspense boundaries or fallback content. The implementation recognizes that not every combination of transitions can be modeled on the server side, leading to a more streamlined approach that ensures necessary attributes are present while avoiding unnecessary complexity. Overall, this enhancement lays the groundwork for future improvements in managing ViewTransitions in multi-page applications (MPAs) and optimizes the rendering process for dynamic content.

Files changed

  • packages/react-dom-bindings/src/client/ReactDOMComponent.js
  • packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
  • packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
  • packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js
  • packages/react-markup/src/ReactFizzConfigMarkup.js
  • packages/react-noop-renderer/src/ReactNoopServer.js
  • packages/react-server/src/ReactFizzServer.js
  • packages/react-server/src/ReactFizzViewTransitionComponent.js
  • packages/react-server/src/forks/ReactFizzConfig.custom.js
2025-05-15T16:12:51 See commit

This commit addresses a regression in the noop detection mechanism for cross-platform (xplat) synchronization within the React repository. The issue arose because the eslint-plugin-react-hooks package uses versioning formats that differ from what xplat expected, leading to unnecessary sync actions being triggered. To resolve this, the commit modifies the detection logic to ignore changes to the eslint-plugin-react-hooks/package.json file, ensuring that a sync is not initiated if only that file has been altered.

The change is implemented in the GitHub workflow file runtime_commit_artifacts.yml, where the script now excludes the eslint-plugin-react-hooks/package.json from the diff check for changes. This adjustment is expected to be a temporary fix, with the potential for further enhancements to the detection mechanism in the future if needed. The commit references a specific failed action to illustrate the problem and indicates that the regression was likely caused by a previous commit.

Files changed

  • .github/workflows/runtime_commit_artifacts.yml