react changelog

Hey there, React enthusiasts! We've got a bunch of exciting updates and some nifty bug fixes to share with you. Let's dive into the latest changes that are sure to enhance your development experience. 🚀

  • New feature: We've added focusLast() and blur() to fragment instances, along with extending the existing focus() method to accept options. This means you can now manage focus more effectively within fragment instances, focusing on the first or last focusable element or blurring an element if it's currently focused. 🎯

  • Improvement: We've separated the Activity element type from Offscreen to allow better boundary semantics during hydration. This change enhances the performance and user experience without affecting Offscreen behavior in suspended children. 🎨

  • New feature: A new validation feature has been introduced to prevent dynamic component creation during render, helping you avoid unintended state resets. This validation is off by default but aims to catch obvious mistakes, ensuring your components are stable and predictable. 🔍

  • New feature: The getClientRects() method is now available for fragment instances, allowing you to retrieve bounding boxes of child elements, making it easier to interact with fragments. 📏

  • Improvement: We've updated the React compiler to support numeric literals as valid object property keys, expanding the flexibility of property key handling. 🔢

  • New feature: Fragment refs are now enabled in an experimental capacity, allowing for testing in the Next.js router when other experimental features are active. 🧪

  • New feature: The GitHub Actions workflow now supports parameterizing branch cleanup with a PR number input, making cache management more flexible and efficient. 🧹

  • Improvement: We've improved security by replacing third-party actions with direct Git commands in our CI/CD pipeline. A dry_run option has been added for testing workflows without pushing changes. 🔒

  • Bugfix: We've fixed ID duplication issues in ViewTransition components, ensuring unique identifiers for nested transitions, preventing naming conflicts. 🛠️

  • Chore: The Discord webhook action in our workflows is now pinned to a specific commit SHA, providing more stability and reliability. 📌

  • Bugfix: The COMMIT_SHA artifact in GitHub Actions is now set to reflect the original commit SHA, improving the accuracy of sizebot links. 🔗

  • Bugfix: We've corrected the component name handling for Portals and added tests for built-in components using React.lazy, ensuring accurate error messages and better functionality. 🧩

We hope these updates make your React development journey a bit smoother and more enjoyable. Keep building awesome stuff! 🎉

Included Commits

2025-03-17T13:17:00 See commit

This commit introduces a significant refactor by creating a distinct element type for Activity, separating it from the Offscreen element type. The primary objective of this change is to implement Activity element boundary semantics during hydration, akin to the existing Suspense semantics. This adjustment aims to enhance the functionality and behavior of the Activity element without affecting the Offscreen behavior in suspended children, thereby improving the overall performance and user experience.

The refactor involves modifications across multiple files in the React codebase, including changes in the React reconciler, devtools, and shared types. Key files modified include various components related to the fiber architecture and testing files, ensuring that the new Activity element type is properly integrated and tested within the existing framework. This comprehensive update not only streamlines the code but also paves the way for more nuanced handling of component states during rendering and hydration processes.

Files changed

  • packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
  • 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/devtools/views/Settings/ComponentsSettings.js
  • packages/react-devtools-shared/src/frontend/types.js
  • packages/react-reconciler/src/ReactFiber.js
  • packages/react-reconciler/src/ReactFiberBeginWork.js
  • packages/react-reconciler/src/ReactFiberCompleteWork.js
  • packages/react-reconciler/src/ReactFiberComponentStack.js
  • packages/react-reconciler/src/ReactWorkTags.js
  • packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js
  • packages/react-reconciler/src/getComponentNameFromFiber.js
  • packages/react-server/src/ReactFizzServer.js
  • packages/react/src/ReactClient.js
  • packages/shared/ReactSymbols.js
  • packages/shared/getComponentNameFromType.js
  • packages/shared/isValidElementType.js
2025-03-17T15:23:28 See commit

This commit addresses a bug related to the handling of component names for React's Portal feature and enhances testing for built-in components when using React.lazy. During the investigation of issues with React.lazy, it was found that the component name for portals was being checked incorrectly, leading to potential errors. To rectify this, the commit modifies the getComponentNameFromType function to correctly identify portals and adds comprehensive tests for all built-in components, ensuring that errors are thrown appropriately when these components are used with lazy.

The changes include updates to test files, where new test cases are introduced to verify that useful error messages are generated when attempting to wrap various built-in components, including portals, in a lazy-loaded manner. Additionally, the necessary adjustments to the component name retrieval logic ensure that the Portal type is now correctly recognized, thereby improving the robustness of the React library. Overall, this commit enhances both the functionality and reliability of React's lazy-loading feature.

Files changed

  • packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
  • packages/shared/getComponentNameFromType.js
2025-03-17T16:46:27 See commit

This commit addresses an issue identified in a previous pull request (#31850) regarding the generation of the COMMIT_SHA artifact in GitHub Actions. The goal is to ensure that the artifact reflects the original commit SHA of the pull request rather than the merge commit that GitHub Actions automatically creates. The update modifies the workflow configuration file to echo the correct SHA into the COMMIT_SHA file by prioritizing the pull request's head SHA, falling back to the standard SHA if necessary.

Additionally, this change is expected to enhance the functionality of sizebot links, directing them to valid URLs. The modifications consist of minor adjustments to the workflow YAML file, including changes to the commands that write the commit SHA to the artifact, ensuring that the correct commit information is captured during the build process.

Files changed

  • .github/workflows/runtime_build_and_test.yml
2025-03-17T18:13:02 See commit

This commit addresses security concerns regarding the use of third-party actions in the GitHub workflow by replacing them with direct Git commands for committing changes. Recent incidents of compromised third-party actions prompted the decision to eliminate reliance on external tools, ensuring a more secure process. The workflow now includes a condition to check if changes are necessary before executing the commit step, thus optimizing the workflow's efficiency.

Additionally, a new dry_run option has been introduced for manual runs of this workflow, allowing users to test the process without actually pushing any changes. This enhancement provides flexibility for testing while maintaining the integrity of the commit process. Overall, the changes reflect a proactive approach to security and usability within the project's CI/CD pipeline.

Files changed

  • .github/workflows/runtime_commit_artifacts.yml
2025-03-17T18:13:17 See commit

This commit updates the GitHub Actions workflows by pinning the Discord webhook action to a specific commit SHA (86dc739f3f165f16dadc5666051c367efa1692f4), which corresponds to the v6 tag of the action. This change was made across multiple workflow files, including compiler_discord_notify.yml, runtime_discord_notify.yml, and runtime_releases_from_npm_manual.yml, ensuring that all instances of the Discord webhook action utilize the same stable version.

By pinning the action to a specific commit instead of using the latest version (v6.0.0), the commit aims to enhance the reliability of the workflows by avoiding potential issues that may arise from future updates to the action. The modifications involve updating the action reference in each workflow file, which includes changes in the steps for utilizing the webhook URL and embed author name.

Files changed

  • .github/workflows/compiler_discord_notify.yml
  • .github/workflows/runtime_discord_notify.yml
  • .github/workflows/runtime_releases_from_npm_manual.yml
2025-03-17T20:17:01 See commit

This commit addresses an issue with the ViewTransition component in React where the auto-assigned names generated by the useId algorithm were causing duplicate names when multiple ViewTransitions were nested without siblings. The problem arose because, while the algorithm ensures that server-side rendered (SSR) content and client content can animate smoothly, it did not account for incrementing the ID when these transitions were nested. As a result, this oversight led to conflicts in naming, particularly in scenarios where multiple transitions could share the same name.

To resolve this, the commit introduces modifications to the rendering logic of ViewTransition, ensuring that the tree ID is materialized correctly when the name is set to "auto." This includes updates in the ReactFiberBeginWork.js, ReactFizzServer.js, and a test component in Page.js. The changes ensure that each ViewTransition instance gets a unique identifier, preventing name collisions and allowing for proper hydration of IDs within the transitions, thereby enhancing the component's functionality and reliability.

Files changed

  • fixtures/view-transition/src/components/Page.js
  • packages/react-reconciler/src/ReactFiberBeginWork.js
  • packages/react-server/src/ReactFizzServer.js
2025-03-17T23:30:58 See commit

This commit introduces a modification to the React compiler by implementing support for numeric literals as valid object property keys. Specifically, it updates the lowerObjectPropertyKey function to handle cases where the key is a numeric literal, converting it into an identifier format. Additionally, the ObjectPropertyKey type is extended to include a new variant for numeric keys, allowing the compiler to recognize and process them appropriately.

The changes also encompass updates to the printObjectPropertyKey and codegenObjectPropertyKey functions, ensuring that numeric keys are correctly printed and generated in the output code. To validate this new functionality, the commit includes new test fixtures that demonstrate the correct handling of numeric literals in object destructuring assignments and JSX expressions. Overall, this enhancement improves the flexibility of the React compiler in handling various property key types.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js
2025-03-18T15:58:12 See commit

This commit introduces two new methods, focusLast() and blur(), to fragment instances in the React library, enhancing focus management capabilities. The focus() method, previously added, allows for focusing the first focusable child element within a fragment. The new focusLast() method similarly focuses the last focusable child, while the blur() method removes focus from an element only if the current active element belongs to the fragment's children. Additionally, the focus() method has been extended to accept options to customize its behavior.

The commit includes updates to several files, with a significant addition of 55 lines of code in the FocusCase.js fixture to demonstrate the new focus management features. Tests have been added to ensure that the new methods work correctly, focusing on the first and last focusable elements as expected, and confirming that the blur functionality operates only on elements within the fragment. This enhancement aims to improve user experience by providing more granular control over focus behavior in React fragments.

Files changed

  • fixtures/dom/src/components/fixtures/fragment-refs/FocusCase.js
  • fixtures/dom/src/components/fixtures/fragment-refs/index.js
  • fixtures/dom/src/style.css
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js
  • packages/react-reconciler/src/ReactFiberTreeReflection.js
2025-03-18T17:54:26 See commit

This commit introduces the getClientRects() method to fragment instances in the React framework, enhancing the functionality of fragments by allowing them to return an array of DOMRect objects that represent the bounding boxes of their child elements. The implementation includes a new method in the FragmentInstance prototype that collects these rectangles by traversing the child elements and flattening the resulting collection into a single array. Additionally, a fixture test case is added to demonstrate the usage of this method, showcasing how it can be employed to retrieve and display the client rects of child nodes within a fragment.

Changes also include modifications to various components and tests, such as updating the structure of the Fixture component for better organization and adding controls for testing purposes. The commit enhances the user experience by providing a more intuitive way to interact with fragment instances and their child elements, while also ensuring that the new functionality is well-tested and integrated into existing test suites.

Files changed

  • fixtures/dom/src/components/Fixture.js
  • fixtures/dom/src/components/fixtures/fragment-refs/EventListenerCase.js
  • fixtures/dom/src/components/fixtures/fragment-refs/FocusCase.js
  • fixtures/dom/src/components/fixtures/fragment-refs/GetClientRectsCase.js
  • fixtures/dom/src/components/fixtures/fragment-refs/IntersectionObserverCase.js
  • fixtures/dom/src/components/fixtures/fragment-refs/index.js
  • fixtures/dom/src/style.css
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js
  • packages/react-dom/src/__tests__/utils/IntersectionMocks.js
2025-03-19T20:39:01 See commit

The commit titled "Parameterize branch cleanup" introduces a modification to the GitHub Actions workflow for cleaning up branch caches in response to closed pull requests. It adds an input parameter, pr_number, which allows users to specify a pull request number when triggering the cleanup process manually. This enhances the flexibility of the workflow by enabling targeted cache deletions based on the provided PR number.

In addition to the new input parameter, the commit also includes minor modifications to the cleanup job. It updates the branch reference to utilize the specified pr_number if provided; otherwise, it defaults to the number from the closed pull request event. The changes improve the clarity of the cleanup process by logging which cache keys are being deleted, ensuring better traceability during the workflow execution. Overall, these updates aim to streamline the cache management process for contributors.

Files changed

  • .github/workflows/shared_cleanup_branch_caches.yml
2025-03-20T00:38:27 See commit

This commit modifies the ReactFeatureFlags.js file to enable the use of Fragment references in an experimental capacity. By changing the enableFragmentRefs flag from false to __EXPERIMENTAL__, the feature can now be tested conditionally within the Next.js router when other experimental features are activated.

The change reflects a commitment to exploring new functionalities in React, allowing developers to experiment with Fragment references while working with the Next.js framework. This adjustment involves a minor modification to the feature flags, indicating a step towards broader support for experimental features in future releases.

Files changed

  • packages/shared/ReactFeatureFlags.js
2025-03-20T18:02:02 See commit

This commit introduces a new validation feature in the React compiler to prevent developers from dynamically creating components during the render phase, which can lead to unintended state resets. By leveraging function identity, React's reconciliation process determines whether a JSX expression refers to the same component type, and this new validation aims to catch cases where components are created dynamically within the render function. The validation checks for specific expressions, such as function calls or new expressions, that are used directly as JSX tags. While the validation is off by default, it provides a conservative approach to catching obvious mistakes, such as defining a component inside the render function.

The implementation includes modifications to the compiler's pipeline and the addition of tests to cover various scenarios where dynamic component creation could occur. The validation will log errors when it detects such patterns, helping developers adhere to best practices by ensuring components are declared outside of render functions. This change is intended to enhance the stability and predictability of component behavior in React applications, and while it could potentially be expanded to catch more edge cases in the future, it serves as a foundational step toward improving component management during rendering.

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/ValidateStaticComponents.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.js