react changelog

Hey there, React fans! We've been busy making some exciting updates and improvements to the React framework. Check out the latest changes that are sure to enhance your development experience and bring some extra pizzazz to your projects! 🚀✨

  • New feature: The React Fiber architecture now supports View Transitions v2, with a focus on using View Transition Classes and Types. This ensures that animations are only triggered if the browser supports the necessary features, providing a more consistent user experience across different platforms. 🌟

  • New feature: Navigation support has been added to the View Transition fixture, utilizing both history.pushState/popstate and the Navigation API. This enhances the synchronization of navigation transitions and scroll restoration, improving the overall user experience. 🧭

  • New feature: Introducing the <ViewTransition> component! This nifty addition allows you to animate changes between UI states during asynchronous updates, making your apps look smooth and delightful. 🎨

  • New feature: You can now style your View Transitions using the className prop on the <ViewTransition> component, enabling reusable and composable styling. CSS Modules are fully compatible, making it easy to maintain unique namespaces for your transition styles. 🎨

  • New feature: A new GitHub Actions workflow has been introduced to send notifications to Discord when a pull request is labeled with "React Core Team," ensuring important updates don't go unnoticed. 🔔

  • Improvement: The React DOM testing framework has been enhanced with more assert helpers, improving the consistency and effectiveness of testing practices across various components. 🛠️

  • Improvement: The RefStatic and LayoutStatic flags in the React reconciler have been unified, simplifying the handling of offscreen content and enhancing the efficiency of the rendering process. ⚡

  • Chore: The display of component names during tracing in React DevTools is now enabled by default, making debugging more informative and straightforward. 🕵️‍♂️

  • New feature: The ViewTransitionComponent has been added to React DevTools, ensuring it is recognized and can be visually distinguished within the development tools. 🔍

  • Bugfix: Fixed a scrolling issue in the React DevTools tree view, ensuring scrolling to an item only occurs when the components panel is visible, improving the user experience. 🐛

  • Bugfix: Addressed a warning issue related to empty string href attributes during hydration, streamlining attribute handling for various HTML elements. 🔧

  • Bugfix: The react-compiler-runtime package now consistently outputs in CommonJS format, enhancing compatibility and simplifying module handling for developers. 📦

Stay tuned for more updates as we continue to improve and expand React's capabilities. Happy coding! 🎉

Included Commits

2025-01-03T02:23:09 See commit

The commit focuses on unifying the RefStatic and LayoutStatic flags in the React reconciler, recognizing that both serve similar purposes in the rendering process. Since refs and layout effects are conceptually aligned and are typically processed together, the decision was made to eliminate the distinction between the two flags. This change simplifies the handling of offscreen content, which requires both refs and layout effects to be addressed simultaneously.

In terms of technical modifications, the commit involves a small update in the ReactFiberFlags.js file, where RefStatic is now set to be equal to LayoutStatic. This adjustment indicates that both flags will be associated with the same phase in the rendering lifecycle, streamlining the code and reducing unnecessary complexity in the reconciler's operation. Overall, this change enhances the efficiency of the React rendering process by consolidating overlapping functionalities.

Files changed

  • packages/react-reconciler/src/ReactFiberFlags.js
2025-01-03T17:53:28 See commit

This commit addresses an issue related to handling empty string href attributes in React components, specifically to eliminate warnings during hydration processes. The changes made involve modifying how the href attribute is compared and assigned in the ReactDOMComponent.js and ReactFiberConfigDOM.js files. The logic now ensures that if the href is an empty string, it is treated as null, which prevents unnecessary warnings during rendering. This adjustment aligns with discussions from a prior pull request and aims to streamline attribute handling for various HTML elements, including <base>, <area>, and <link> tags.

Additionally, the commit includes updates to tests in ReactDOMServerIntegrationAttributes-test.js to verify that empty href attributes are correctly rendered as null. The tests now check for this behavior in multiple contexts, ensuring that the changes do not introduce regressions and that the expected outcomes are consistently achieved. Overall, the commit refines how React manages hydration warnings related to href attributes, improving the developer experience and the robustness of the framework.

Files changed

  • packages/react-dom-bindings/src/client/ReactDOMComponent.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
2025-01-05T22:10:29 See commit

This commit, titled "moar assert helpers," represents a significant update to the testing framework within the React DOM package, completing the conversion of test files to utilize assert helpers. It addresses multiple test files across various components and functionalities, ensuring more robust and reliable testing practices. The changes include modifications to a wide range of tests, such as those for legacy components, server rendering, and error boundaries, among others.

While the commit successfully enhances the testing infrastructure for the majority of the React DOM components, it notes that server integration tests remain unconverted due to their complexity. Overall, this effort aims to improve the consistency and effectiveness of testing within the React DOM environment, paving the way for better maintenance and future development.

Files changed

  • packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js
  • packages/react-dom/src/__tests__/ReactDOMLegacyComponentTree-test.internal.js
  • packages/react-dom/src/__tests__/ReactDOMLegacyFiber-test.js
  • packages/react-dom/src/__tests__/ReactDOMOption-test.js
  • packages/react-dom/src/__tests__/ReactDOMRoot-test.js
  • packages/react-dom/src/__tests__/ReactDOMSelect-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
  • packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js
  • packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
  • packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
  • packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
  • packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
  • packages/react-dom/src/__tests__/ReactIdentity-test.js
  • packages/react-dom/src/__tests__/ReactLegacyCompositeComponent-test.js
  • packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
  • packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
  • packages/react-dom/src/__tests__/ReactLegacyMount-test.js
  • packages/react-dom/src/__tests__/ReactLegacyUpdates-test.js
  • packages/react-dom/src/__tests__/ReactMountDestruction-test.js
  • packages/react-dom/src/__tests__/ReactMultiChild-test.js
  • packages/react-dom/src/__tests__/ReactMultiChildText-test.js
  • packages/react-dom/src/__tests__/ReactRenderDocument-test.js
  • packages/react-dom/src/__tests__/ReactServerRendering-test.js
  • packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
  • packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
  • packages/react-dom/src/__tests__/ReactUpdates-test.js
  • packages/react-dom/src/__tests__/validateDOMNesting-test.js
2025-01-06T14:06:09 See commit

This commit addresses an issue in the react-compiler-runtime package by modifying the build configuration to ensure that the output format is consistently set to CommonJS (cjs). The change was made in the build.js script, where the previous logic that determined the format based on the provided argument (argv.p) was simplified to always output in cjs format.

As a result of this modification, the build process will no longer switch between ECMAScript modules (esm) and CommonJS based on the input parameter, which enhances compatibility and simplifies the module handling for consumers of the react-compiler-runtime package. The change reflects a commitment to maintaining a stable and predictable module format for developers using this library.

Files changed

  • compiler/packages/react-compiler-runtime/scripts/build.js
2025-01-06T22:57:19 See commit

This commit introduces a new GitHub Actions workflow designed to send notifications to Discord when a pull request is labeled with "React Core Team." The workflow, defined in the .github/workflows/discord_notify.yml file, triggers on pull request events specifically when they are labeled. It utilizes a Discord webhook to format and send a message that includes details about the pull request, such as the author's information, the title, description, and a link to the pull request.

The implementation consists of 22 lines of code, with no deletions, indicating a straightforward addition to the repository. The author notes that further testing will be necessary to ensure the functionality works as intended, highlighting the importance of validating the integration with Discord notifications.

Files changed

  • .github/workflows/discord_notify.yml
2025-01-08T17:11:18 See commit

The recent commit introduces the <ViewTransition> component to React, enabling developers to implement View Transitions, which enhance the user experience by animating changes between UI states during asynchronous updates. This component acts like a DOM fragment, allowing developers to wrap components and manage transitions effectively without needing to opt-in at the event handler level. By default, the <ViewTransition> assigns a view-transition-name automatically, facilitating seamless transitions between different components, such as when switching between a loading skeleton and the actual content in a <Suspense> scenario.

The implementation includes a set of heuristics that determine when to activate the View Transition, ensuring that animations are smooth and contextually appropriate. This approach helps avoid unwanted animations triggered by unrelated updates, enhancing the overall performance and usability of complex applications. The commit also lays the groundwork for further optimizations and expanded APIs in future updates, making it a significant addition to React's capabilities for managing UI transitions.

Files changed

  • fixtures/view-transition/README.md
  • fixtures/view-transition/package.json
  • fixtures/view-transition/public/favicon.ico
  • fixtures/view-transition/public/index.html
  • fixtures/view-transition/server/index.js
  • fixtures/view-transition/server/render.js
  • fixtures/view-transition/src/components/App.js
  • fixtures/view-transition/src/components/Chrome.css
  • fixtures/view-transition/src/components/Chrome.js
  • fixtures/view-transition/src/components/Page.js
  • fixtures/view-transition/src/index.js
  • fixtures/view-transition/yarn.lock
  • packages/react-art/src/ReactFiberConfigART.js
  • packages/react-devtools-shared/src/utils.js
  • packages/react-dom-bindings/src/client/CSSPropertyOperations.js
  • packages/react-dom-bindings/src/client/DOMPropertyOperations.js
  • packages/react-dom-bindings/src/client/ReactDOMComponent.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-is/src/ReactIs.js
  • packages/react-native-renderer/src/ReactFiberConfigNative.js
  • packages/react-noop-renderer/src/createReactNoop.js
  • packages/react-reconciler/src/ReactFiber.js
  • packages/react-reconciler/src/ReactFiberBeginWork.js
  • packages/react-reconciler/src/ReactFiberCommitHostEffects.js
  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberCompleteWork.js
  • packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js
  • packages/react-reconciler/src/ReactFiberFlags.js
  • packages/react-reconciler/src/ReactFiberLane.js
  • packages/react-reconciler/src/ReactFiberMutationTracking.js
  • packages/react-reconciler/src/ReactFiberViewTransitionComponent.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
  • packages/react-reconciler/src/ReactWorkTags.js
  • packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
  • packages/react-server/src/ReactFizzComponentStack.js
  • packages/react-server/src/ReactFizzServer.js
  • packages/react-test-renderer/src/ReactFiberConfigTestHost.js
  • packages/react/index.experimental.development.js
  • packages/react/index.experimental.js
  • packages/react/index.js
  • packages/react/src/ReactClient.js
  • packages/react/src/ReactServer.experimental.development.js
  • packages/react/src/ReactServer.experimental.js
  • packages/shared/ReactComponentStackFrame.js
  • packages/shared/ReactFeatureFlags.js
  • packages/shared/ReactSerializationErrors.js
  • packages/shared/ReactSymbols.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
  • packages/shared/getComponentNameFromType.js
  • packages/shared/isValidElementType.js
  • scripts/error-codes/codes.json
2025-01-08T18:22:06 See commit

This commit introduces a new method for styling View Transitions in React by allowing the use of the className prop on the <ViewTransition> component. This approach facilitates reusable and composable styling, enabling developers to apply CSS classes for different transition effects without naming conflicts. The className prop does not alter the HTML class attribute but instead sets the view-transition-class style property of the underlying DOM node during transitions. This method enhances flexibility, allowing developers to manage transitions from outside the component and create wrapper components for different scenarios.

Additionally, the commit addresses compatibility with CSS Modules, emphasizing their ability to maintain globally unique namespaces for transition styles. While the use of className may seem inconsistent since it doesn't directly correspond to a DOM property, it provides a familiar interface for most developers. The commit also notes a bug with CSS Modules in Webpack related to the generation of class names, which can lead to invalid characters in the view-transition-class. Overall, this change aims to streamline the implementation of view transitions in React applications while improving the developer experience.

Files changed

  • fixtures/view-transition/package.json
  • fixtures/view-transition/server/index.js
  • fixtures/view-transition/server/render.js
  • fixtures/view-transition/src/components/Page.js
  • fixtures/view-transition/src/components/Transitions.module.css
  • fixtures/view-transition/yarn.lock
  • packages/react-art/src/ReactFiberConfigART.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.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/ReactFiberViewTransitionComponent.js
  • packages/react-test-renderer/src/ReactFiberConfigTestHost.js
2025-01-08T18:22:15 See commit

This commit focuses on enhancing support for View Transitions v2 in the React Fiber architecture, specifically recommending the use of View Transition Classes and Types, which are part of the newer specification. The authors emphasize that when these features are not available, it is preferable to disable animations altogether rather than applying incorrect styling rules. This change is motivated by the fact that the View Transitions v2 spec is already well-supported in recent versions of Chrome and Safari, while older versions of Safari (18.0 and 18.1) will not support animations at all.

The implementation involves modifying the startViewTransition function to utilize a try-catch block for feature detection, ensuring that animations only trigger if the browser supports the required object form. If the feature is unsupported, the system will gracefully fallback to no animations, thereby avoiding inconsistencies and potential issues with partial support across different browsers. The commit also mentions that Firefox has not yet implemented this feature, indicating a need for future monitoring regarding its rollout and compatibility.

Files changed

  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
2025-01-08T23:57:54 See commit

This commit introduces navigation support for the View Transition fixture in React, utilizing both the history.pushState/popstate and the Navigation API. It identifies an issue where using popstate would lead to artifacts due to synchronous scroll restoration conflicting with the asynchronous nature of startViewTransition. As a result, View Transitions are intentionally not supported during popstate, ensuring that scroll restoration operates correctly. For the Navigation API, the commit proposes resolving the Navigation promise only after React has completed its mutations, thus preventing any premature viewport measurements that could disrupt the intended animations.

Additionally, the commit modifies the rendering logic and component structure to accommodate these changes, ensuring that navigation is handled effectively while maintaining the integrity of viewport calculations. It also emphasizes the need for resolving Navigation within useInsertionEffect to avoid potential deadlocks, while proposing a shift of the layout phase to precede the after mutation phase, ensuring that auto-scrolling effects within useLayoutEffect are accurately factored into viewport measurements. Overall, the changes enhance the synchronization of navigation transitions and scroll restoration, improving the user experience in React applications.

Files changed

  • fixtures/view-transition/server/render.js
  • fixtures/view-transition/src/components/App.js
  • fixtures/view-transition/src/components/Page.js
  • fixtures/view-transition/src/index.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-reconciler/src/ReactFiberLane.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
2025-01-09T16:33:34 See commit

This commit introduces the ViewTransitionComponent to various parts of the React DevTools codebase, specifically targeting the stack and type definitions to ensure it is recognized within the development tools. The changes include updates to several files, such as DevToolsFiberComponentStack.js and renderer.js, where the new component is added to the work tag map and the internal React constants. Additionally, the ElementTypeViewTransition is defined in the frontend types, allowing it to be visually distinguished in the elements tree.

The commit does not include experimental components in the filter list at this time, and it sets the groundwork for the ViewTransitionComponent to be integrated into the React ecosystem. The updates ensure that the component can be described and identified correctly within the React DevTools, enhancing the debugging experience for developers working with view transitions.

Files changed

  • packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js
  • packages/react-devtools-shared/src/backend/fiber/renderer.js
  • packages/react-devtools-shared/src/backend/types.js
  • packages/react-devtools-shared/src/frontend/types.js
  • packages/react-reconciler/src/ReactFiberComponentStack.js
  • packages/react-reconciler/src/getComponentNameFromFiber.js
2025-01-09T18:00:09 See commit

The commit titled "chore[DevTools/TraceUpdates]: display names by default (#32019)" focuses on enabling a previously introduced feature that displays component names by default during tracing in React DevTools. This change is part of a gradual rollout strategy, particularly for React Native, which will require adjustments on its side to accommodate the new functionality. The update simplifies the codebase by removing references and settings related to toggling the display of names, thereby streamlining the user experience.

The modifications include the removal of related event listeners and state variables that controlled the visibility of names when tracing updates. Consequently, the feature will now always show component names without requiring user intervention. This change aims to minimize divergence in functionality, especially as plans are in place to make this feature accessible through the browser context menu, despite the limited API available. Overall, the commit enhances the React DevTools by making tracing updates more informative for developers.

Files changed

  • packages/react-devtools-shared/src/backend/agent.js
  • packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
  • packages/react-devtools-shared/src/bridge.js
  • packages/react-devtools-shared/src/constants.js
  • packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
  • packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
2025-01-09T18:38:49 See commit

This commit addresses a scrolling issue in the React DevTools tree view, specifically when syncing user DOM selections while the panel is visible. The fix ensures that scrolling to an item only occurs when the components panel is displayed, which is particularly relevant for the browser extension implementation. To achieve this, new event listeners were added to track when the components panel is shown or hidden, emitting events accordingly. For non-extension implementations, a constant value of true is returned to maintain compatibility.

The changes involve modifications across several files, including the addition of a new hook, useExtensionComponentsPanelVisibility, which manages the visibility state of the components panel. The implementation simplifies the logic for scrolling to the selected item, ensuring that it only triggers when the panel is actively visible, thus preventing unnecessary scrolling actions when the panel is hidden. Overall, the commit enhances the user experience in the DevTools by refining the interaction between the tree view and the components panel.

Files changed

  • packages/react-devtools-extensions/src/main/index.js
  • packages/react-devtools-shared/src/bridge.js
  • packages/react-devtools-shared/src/devtools/views/Components/Tree.js
  • packages/react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibility.js