react changelog

In this update, we've introduced several exciting new features and improvements to enhance your React experience. From enabling direct object support in media elements to enhancing automated notifications and improving component tracking, these changes aim to streamline development and optimize performance. Let's dive into the details! 🎉

  • New Feature: Pass Blob/File/MediaSource/MediaStream to Media Elements 🎥🎵

    • You can now pass Blob, File, MediaSource, or MediaStream objects directly to the src attribute of <img>, <video>, and <audio> elements. This is under the enableSrcObject flag, offering a more convenient and declarative API style.

  • New Feature: Suspensey Images Behind a Flag 🖼️⏳

    • Images now wait to render until decoded, with a 500ms timeout, enhancing the handling of images in React. This applies to various transitions and can be opted out with certain attributes.

  • Improvement: Component Lifecycle Logging 📝

    • We've added logging for mount, unmount, reconnect, and disconnect events in components, making it easier to track lifecycle events across various phases.

  • New Feature: Discord Notifications for Publish Failures 🔔

    • If an automated publish fails, a notification will be sent to a Discord channel, improving communication within the development team.

  • New Feature: Enable Suspensey Images in <ViewTransition> 🌟

    • Suspensey Images are now enabled within <ViewTransition> subtrees, even if the flag is off, enhancing view transitions.

  • New Feature: unstable_Activity in Server Entrypoint 🚀

    • unstable_Activity can now be imported and rendered from a Server Component, similar to other component types like Suspense and ViewTransition.

  • Improvement: Fabric Priorities Mapping 📊

    • We've expanded the mapping of event priorities between Fabric and the React reconciler to include a broader range of priorities.

  • Improvement: Inline Preamble Contribution 📜

    • Preamble contributions are now emitted earlier in the render phase, enhancing rendering efficiency.

  • Bugfix: Correct Type in getTypeSymbol 🐛

    • The getTypeSymbol function now correctly includes string as a return type, improving type handling.

  • Bugfix: Fix measure Error in Performance API ⏲️

    • Addressed an error in the measure function related to startTime, preventing incorrect logging during component rendering.

  • Bugfix: Safari display: inline Workaround 🐞

    • Introduced a workaround for a Safari bug involving view-transition-name, with automatic style adjustments to prevent duplicate name errors.

These updates are set to make your React development smoother and more efficient, while also enhancing the performance and compatibility of your applications. Happy coding! 🚀

Included Commits

2025-04-04T03:33:29 See commit

This commit introduces logging functionality for component lifecycle events in a React application, specifically focusing on the mounting, unmounting, reconnecting, and disconnecting of components. A distinguishing feature of this update is the addition of a yellow entry above the component subtree in the performance tracking interface, which helps differentiate between mounted and updated subtrees across various phases of the React lifecycle, including render, mutation, layout, and passive effect phases. This approach aims to maintain clarity without overwhelming the user with excessive annotations, as it restricts the markers to one per depth in the component tree.

The commit modifies several files to implement these logging features, including the ReactFiberCommitWork and ReactFiberPerformanceTrack modules. The new logging functions, such as logComponentMount, logComponentUnmount, logComponentReappeared, and logComponentDisappeared, are designed to track the timing of these events, allowing developers to analyze performance more effectively. The changes also ensure that logs are generated under specific conditions, such as when component effects exceed a defined duration, thereby providing valuable insights into component behavior and performance during rendering and updates.

Files changed

  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberPerformanceTrack.js
2025-04-04T18:54:05 See commit

The commit titled "Add Suspensey Images behind a Flag" introduces a new feature that enhances the handling of images in React by integrating them with the existing Suspensey CSS functionality. This implementation ensures that images will wait to render until they have decoded, either by default or up to a 500ms timeout, similar to how suspensey fonts operate. The changes specifically apply to various transition scenarios, including Transitions, Retries, and Gesture Transitions, while immediate commits are maintained for synchronous updates. Notably, images that are set to load lazily using the loading="lazy" attribute or those that manage their own loading via an onLoad event handler will opt out of this behavior.

Future enhancements may include an opt-in feature that allows for longer timeouts and the potential to trigger error boundaries on image load failures. The rollout of this feature is planned for a major release, with considerations to possibly relax the default timeout to avoid excessive delays. Additionally, it could be integrated with the enableViewTransition feature, allowing animations that utilize View Transitions to suspend on images, potentially shipping in a minor release. The commit includes modifications across various files in the React codebase to support these changes.

Files changed

  • fixtures/view-transition/src/components/Page.js
  • packages/react-art/src/ReactFiberConfigART.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-native-renderer/src/ReactFiberConfigFabric.js
  • packages/react-native-renderer/src/ReactFiberConfigNative.js
  • packages/react-noop-renderer/src/createReactNoop.js
  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberCompleteWork.js
  • packages/react-reconciler/src/ReactFiberLane.js
  • packages/react-reconciler/src/ReactFiberPerformanceTrack.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
  • packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
  • packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
  • packages/react-test-renderer/src/ReactFiberConfigTestHost.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-04-07T09:51:28 See commit

This commit addresses an issue in the getTypeSymbol function, which was previously defined to return only symbol or number types. The change updates the return type to include string, reflecting that getTypeSymbol can also return string values. The modification involved altering the type definition of getTypeSymbolType and updating the implementation of getTypeSymbol to ensure it correctly handles and returns string values when appropriate.

In total, the commit consists of minor modifications, including three additions and four deletions, resulting in a more comprehensive type signature for the function. This adjustment enhances the function's flexibility and accuracy in type handling, which is particularly important for developers using the React DevTools shared package.

Files changed

  • packages/react-devtools-shared/src/backend/fiber/renderer.js
2025-04-07T14:08:07 See commit

This commit addresses a bug in Safari related to the view-transition-name property, which causes issues when a block element is nested inside an inline element. Specifically, the bug leads to duplicate name errors during view transitions. To mitigate this, the commit introduces a warning in development mode when such a scenario is detected, alerting developers to the potential issue. Additionally, for cases where the inline element could be rendered as a single block, the parent element's display style is automatically adjusted to either block or inline-block, which helps in resolving the issue for simple structures like <a><div>...</div></a>.

However, this workaround may result in layout thrashing, and the commit notes that it might be prudent to remove this fix once the bug is resolved in future versions of Safari. The changes involve modifications to several files, including the addition of new functions to warn developers and adjust styles as necessary. Overall, the commit aims to enhance compatibility with Safari while maintaining the integrity of view transitions in React applications.

Files changed

  • fixtures/view-transition/src/components/Page.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-reconciler/src/ReactFiberApplyGesture.js
2025-04-07T14:13:34 See commit

This commit addresses an error related to the measure function in the Performance API, specifically the Failed to execute 'measure' on 'Performance' error. The issue arises when the startTime variable retains its initial value of -1.1, which can happen during the rendering of a 'next/dynamic' component with server-side rendering (SSR) disabled in client components. To prevent this error, the commit modifies the conditions under which the logComponentMount function is called, ensuring that it is only executed if startTime is greater than or equal to zero.

The changes made in the code involve adding checks to validate the startTime before logging component mounts and reappearances. Specifically, the conditions in the commitPassiveMountOnFiber function are updated to include a check for startTime >= 0, thereby preventing the logging function from being invoked with invalid startTime values. While the author was unable to reproduce the scenario in a unit test, these modifications aim to enhance the robustness of the performance logging mechanism in React.

Files changed

  • packages/react-reconciler/src/ReactFiberCommitWork.js
2025-04-08T16:11:41 See commit

This commit introduces the ability to pass Blob, File, MediaSource, or MediaStream objects directly to the src attribute of <img>, <video>, and <audio> elements in React, under the enableSrcObject flag. Instead of implementing a separate srcObject property, the approach allows for an overload of the existing src attribute, making it more convenient for developers while maintaining a declarative API style. The change is particularly beneficial for React Server Components (RSC), as it eliminates the need for additional client component wrappers when rendering Blobs, enabling optimized binary encoding for client navigations.

The commit also highlights the complexities of handling server-side rendering (SSR) and the timing of rendering with Suspensey images, which can be cumbersome when using effects. By integrating this functionality directly into React, it streamlines the process and potentially optimizes payloads shared between RSC and HTML. However, it does not extend support to <source src> or <img srcset>, as those do not have direct equivalents in the DOM. Future support for Response objects is also hinted at, indicating ongoing enhancements to this feature.

Files changed

  • fixtures/flight/package.json
  • fixtures/flight/src/App.js
  • fixtures/flight/src/GenerateImage.js
  • fixtures/flight/yarn.lock
  • packages/react-dom-bindings/src/client/ReactDOMComponent.js
  • packages/react-dom-bindings/src/client/ReactDOMSrcObject.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js
  • packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
  • packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
  • packages/react-dom/src/__tests__/ReactDOMSrcObject-test.js
  • packages/react-reconciler/src/ReactFiberHydrationDiffs.js
  • packages/react-server/src/ReactServerStreamConfigBrowser.js
  • packages/react-server/src/ReactServerStreamConfigBun.js
  • packages/react-server/src/ReactServerStreamConfigEdge.js
  • packages/react-server/src/ReactServerStreamConfigFB.js
  • packages/react-server/src/ReactServerStreamConfigNode.js
  • packages/react-server/src/forks/ReactServerStreamConfig.custom.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-04-08T21:55:15 See commit

This commit introduces a new feature that enables the use of "Suspensey Images" within <ViewTransition> subtrees, even when the enableSuspenseyImages flag is set to off. The change is driven by the need to enhance the handling of view transitions, which already accommodate suspensey fonts. By allowing <ViewTransition> to act as an early opt-in for Suspensey Images, this feature aims to improve the user experience during transitions, particularly in scenarios where updates may lead to suspensions. The implementation ensures that any updates within a ViewTransition can trigger a transition even if it doesn't animate, thereby maintaining a consistent Suspensey experience.

To facilitate testing and further development, the commit disables the enableSuspenseyImages flag in the experimental phase, allowing developers to focus on the specific path where this functionality is enabled solely within <ViewTransition> trees. This targeted approach is intended to streamline the transition process and prepare for a future where Suspensey Images can be universally applied. The changes include modifications across several files, affecting how the React Fiber reconciler handles potential suspensions and how the overall rendering process interacts with the new feature.

Files changed

  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-reconciler/src/ReactFiber.js
  • packages/react-reconciler/src/ReactFiberCompleteWork.js
  • packages/react-reconciler/src/ReactTypeOfMode.js
  • packages/react-reconciler/src/__tests__/ReactSuspenseyCommitPhase-test.js
  • packages/shared/ReactFeatureFlags.js
2025-04-09T05:49:27 See commit

The commit introduces unstable_Activity as a new entry point in the server component architecture of React. While Activity is primarily a client component, this update allows it to be imported and rendered from a Server Component, similar to existing functionalities for other component types like Suspense and ViewTransition.

The changes are minimal, involving modifications to the ReactServer.experimental.js file, where REACT_ACTIVITY_TYPE is added to the list of experimental features. This enhancement aims to improve the flexibility and functionality of server-side rendering in React, enabling developers to utilize Activity in server environments.

Files changed

  • packages/react/src/ReactServer.experimental.js
2025-04-09T17:14:28 See commit

This commit enhances the automated publishing process by adding a notification feature that alerts a Discord channel when a publish operation fails. Modifications were made to the GitHub Actions workflow files, specifically runtime_prereleases_nightly.yml and runtime_prereleases.yml, to introduce a new input parameter, enableFailureNotification. When set to true, this parameter triggers a Discord notification using a specified webhook URL if the publish fails. The necessary secrets for the webhook URL are also incorporated into the workflows.

In detail, the commit included changes to the job definitions to allow for failure notifications, as well as the addition of a conditional step that executes only upon failure. This step utilizes a Discord webhook action to send a message containing relevant information about the failed publish attempt, including a link to the GitHub Actions run for further investigation. Overall, these updates aim to improve communication and responsiveness within the development team by providing immediate feedback on automated publishing issues.

Files changed

  • .github/workflows/runtime_prereleases.yml
  • .github/workflows/runtime_prereleases_nightly.yml
2025-04-10T16:35:15 See commit

This commit addresses the mapping of event priorities between Fabric and the React reconciler in React Native, ensuring that a broader range of priorities is correctly accounted for. Previously, only default and discrete priorities were considered, limiting the functionality of Fabric when it comes to handling events. With this update, additional priorities such as continuous and idle are now included, which will facilitate more comprehensive testing of these priorities in Fabric as they are implemented.

Currently, the changes are considered a no-op since Fabric is only reporting default and discrete event priorities. The commit includes modifications to the ReactFiberConfigFabric.js and react-native-host-hooks.js files to incorporate the new priorities. Future testing will be conducted end-to-end on React Native, leveraging a feature flag to ensure the changes are gated appropriately.

Files changed

  • packages/react-native-renderer/src/ReactFiberConfigFabric.js
  • scripts/flow/react-native-host-hooks.js
2025-04-10T23:42:03 See commit

The commit titled "Emit Preamble Contribution inline instead of the end of a boundary" introduces a significant change in how preamble contributions are handled during the rendering phase in a React application. Previously, these contributions were written at the end of a boundary, but the new approach allows them to be emitted earlier in the render phase. This change ensures that preamble contributions remain within the document scope, thereby preventing them from being wrapped by elements that would remove them from the document context. The modifications aim to enhance the rendering efficiency and maintain the integrity of the document structure when searching for content.

The commit includes various code changes across multiple files, notably in ReactFiberConfigDOM.js and ReactFizzConfigDOM.js, where constants representing preamble contributions have been updated from bitwise values to string identifiers for clarity. Additionally, the logic for handling these contributions has been streamlined, eliminating unnecessary checks and simplifying the process of clearing contributions when boundaries are cleared. Overall, these updates not only improve the performance of the rendering process but also make the codebase more maintainable and easier to understand.

Files changed

  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
  • packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
  • packages/react-markup/src/ReactFizzConfigMarkup.js
  • packages/react-noop-renderer/src/ReactNoopServer.js
  • packages/react-server/src/ReactFizzServer.js