react changelog

This update brings a bunch of exciting enhancements and fixes to keep your React projects running smoothly and efficiently! 🎉 Here's a rundown of what's new and improved:

  • New Feature: Merging React Compiler Rule
    We've merged the react-compiler rule into the eslint-plugin-react-hooks, keeping commit history intact while adding new dependencies. This is a major change, so keep an eye out for the next big release! 🚀

  • New Feature: DOM Fixture for Fragment Refs
    Test Fragment References with our new DOM fixture page! Check out how addEventListener and removeEventListener work with Fragments and get those event listeners dancing. 🕺

  • New Feature: Ref Support for Fragments
    Fragments just got cooler! Now they can accept a ref prop, allowing you to attach event listeners and manage groups of elements with ease. This experimental feature is ready for your feedback. 🌟

  • Improvement: Dynamic renameElementSymbol
    We've made renameElementSymbol more dynamic for native Facebook, improving the flexibility of feature management. No more static declarations! 🔄

  • Bugfix: Child Node Checks for moveBefore
    Fixed a critical issue with moveBefore by ensuring nodes are connected before moving them. This prevents errors during initial insertions. ⚠️

  • Improvement: Enhanced Error Logging
    We've improved error handling for startViewTransition, providing clearer insights into errors during development while keeping production logs clean. 🛠️

  • Bugfix: Server Reference and .bind() Compatibility
    Ensured registerServerReference works seamlessly with .bind(), maintaining compatibility and preventing errors. 🔗

  • New Feature: Prebuild Commands with Rollup
    Introducing a prebuild option for Rollup, allowing you to run commands before building your bundle. Perfect for complex build requirements! 🛠️

  • New Feature: Experimental moveBefore
    We've enabled moveBefore in experimental releases, letting you test this feature while we gather feedback. 🧪

  • Bugfix: Canceling Animations in View Transitions
    Prevent pesky animation flashes by manually canceling finished view transition animations. Safari users, rejoice! 🎬

  • Improvement: Compiler Migration to tsup
    We've migrated our compiler packages to tsup, improving build performance and enabling type declaration generation. Fast and efficient! ⚡

  • Chore: Prettier Formatting
    Ran Prettier on eslint-plugin-react-compiler/src/types for cleaner, more consistent code. Because neat code is happy code! ✨

These updates are designed to enhance your development experience and keep your projects in tip-top shape. Dive in and explore the new features and improvements! 🌟

Included Commits

2025-03-07T21:41:55 See commit

This commit migrates the compiler packages from using esbuild directly to utilizing tsup, a build tool based on esbuild. The primary motivation for this change is to facilitate the generation of type declaration files, which was not feasible with the previous setup, particularly for the babel-plugin-react-compiler. The new approach not only maintains comparable build performance but also allows for the inclusion of type declarations when needed, although it is turned off by default to optimize build times. The author emphasizes that while the migration to tsup is expected to help address issues related to type checking and declarations, it can also be released independently without blocking other ongoing tasks.

The commit includes modifications across several packages, with the addition of tsup.config.ts files for those that require it. Benchmarking results indicate that the overall build time has improved with the new setup, demonstrating a faster build process when not generating type declarations. The author notes that esbuild will still be retained for specific tasks, ensuring that the transition does not disrupt existing workflows.

Files changed

  • compiler/apps/playground/next-env.d.ts
  • compiler/apps/playground/playwright.config.js
  • compiler/package.json
  • compiler/packages/babel-plugin-react-compiler/package.json
  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Reanimated.ts
  • compiler/packages/babel-plugin-react-compiler/tsconfig.json
  • compiler/packages/babel-plugin-react-compiler/tsup.config.ts
  • compiler/packages/eslint-plugin-react-compiler/package.json
  • compiler/packages/eslint-plugin-react-compiler/src/index.ts
  • compiler/packages/eslint-plugin-react-compiler/tsconfig.json
  • compiler/packages/eslint-plugin-react-compiler/tsup.config.ts
  • compiler/packages/make-read-only-util/package.json
  • compiler/packages/make-read-only-util/tsup.config.ts
  • compiler/packages/react-compiler-healthcheck/package.json
  • compiler/packages/react-compiler-healthcheck/tsup.config.ts
  • compiler/packages/react-compiler-runtime/package.json
  • compiler/packages/react-compiler-runtime/tsup.config.ts
  • compiler/scripts/release/shared/build-packages.js
  • compiler/yarn.lock
2025-03-10T19:24:09 See commit

The commit titled "Make renameElementSymbol dynamic for native fb" introduces a modification that allows the renameElementSymbol feature flag to be dynamically controlled for the native Facebook environment. This change is part of an internal rollout strategy, as indicated by the use of the __VARIANT__ placeholder, which facilitates toggling the feature on or off depending on specific conditions.

In the code, the renameElementSymbol flag has been added to the list of dynamic flags in the ReactFeatureFlags.native-fb-dynamic.js file, replacing its previous static declaration in ReactFeatureFlags.native-fb.js. The update ensures that this feature can be managed more flexibly, potentially improving the efficiency of feature management and experimentation within the codebase.

Files changed

  • packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
  • packages/shared/forks/ReactFeatureFlags.native-fb.js
2025-03-10T19:27:37 See commit

This commit addresses an issue with view transition animations in Safari, where finished animations could interfere with subsequent transitions, leading to visual glitches such as flashes. The problem arose when a view transition was triggered while scroll position updates were being processed, which inadvertently initiated a gesture that was blocked by the ongoing transition. This led to the previous animation being picked up again, causing further complications. To resolve this, the commit introduces a function to manually cancel any ongoing view transition animations before starting a new transition, ensuring that they do not persist and affect the new transition.

The code changes include the addition of a cancelAllViewTransitionAnimations function that iterates through currently running animations within a specified scope and cancels those associated with view transitions. This function is called at the conclusion of view transitions to clear any lingering animations, thereby preventing them from causing issues in future transitions. Overall, this update enhances the stability of view transitions in Safari by effectively managing animation states.

Files changed

  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
2025-03-10T19:27:46 See commit

The commit titled "Enable moveBefore in experimental releases" introduces the moveBefore function as an experimental feature in the framework, acknowledging the risks associated with enabling early DOM features. The author expresses concerns about the potential consequences of relying on features that may change, as seen with the transition from contains to includes. They emphasize that frameworks should ideally wait for multiple implementations before adopting such features to avoid breaking existing websites.

Despite initial hesitation to enable moveBefore, the author notes that sufficient feature detection and the longevity of its presence in Chrome make it unlikely for the implementation to change significantly. Therefore, the feature is now enabled in the experimental phase, allowing developers to identify and address any issues before potentially moving it to stable releases. The commit modifies the ReactFeatureFlags.js file to reflect this change, setting enableMoveBefore to experimental status.

Files changed

  • packages/shared/ReactFeatureFlags.js
2025-03-10T22:12:43 See commit

This commit addresses a critical issue with the moveBefore functionality in React, specifically related to the handling of node states during DOM manipulations. It introduces a check to determine if a child node is already connected to the DOM before attempting to call moveBefore. This adjustment is necessary because the previous assumption that the transition from a disconnected to a connected state would not trigger an error was incorrect. As a result, the code now ensures that moveBefore is only invoked for nodes that are already connected, preventing potential errors during initial insertions.

However, this solution comes with performance drawbacks, as it introduces additional checks for each node, leading to inefficiencies. The commit highlights the need for React to differentiate between initial insertions and moves, suggesting that a refactor would be ideal to streamline the code and eliminate redundancy. The author expresses concern about the reliability of this implementation across different browsers, indicating a reluctance to ship it until broader support is confirmed. Overall, while the commit resolves a significant issue, it also raises questions about future optimizations and potential code duplication.

Files changed

  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
2025-03-11T21:15:38 See commit

The commit addresses an issue in the React Flight client-side code, specifically with the registerServerReference function, which previously caused problems when using the .bind() method on server references. The changes involve modifying the structure of how server references are stored in a WeakMap, transitioning from a simpler object to a more complex ServerReferenceClosure type that includes the original bind function. This adjustment ensures that when .bind() is called on a server reference, it does not disrupt the intended functionality, thereby maintaining compatibility and preventing errors during subsequent operations.

In addition to the code modifications, the commit includes updates to the testing suite to confirm that registering a server reference with the client does not interfere with the functionality of .bind(). The overall aim of the changes is to enhance the robustness of server references in the React framework, ensuring that they can be used seamlessly without breaking existing behavior, especially in server-side rendering scenarios.

Files changed

  • packages/react-client/src/ReactFlightReplyClient.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
2025-03-12T03:02:45 See commit

This commit enhances error handling for the startViewTransition function in React by implementing a logging mechanism for recoverable errors. The changes primarily focus on customizing error messages during development (DEV) while simplifying the output in production environments. The new error handling structure categorizes specific error types, such as TimeoutError, AbortError, and InvalidStateError, providing tailored messages for developers to better understand the issues that may arise during view transitions. Notably, certain non-error messages are skipped to prevent cluttering the logs.

The modifications involve updates across several files, including the addition of an errorCallback parameter to various transition-related functions. This callback is invoked whenever an error occurs, allowing for more granular error reporting. The commit also introduces a customizeViewTransitionError function, which processes errors to determine if they should be logged or ignored based on their nature. Overall, these changes aim to improve the developer experience by providing clearer insights into view transition errors while maintaining a clean production environment.

Files changed

  • 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/ReactFiberWorkLoop.js
  • packages/react-test-renderer/src/ReactFiberConfigTestHost.js
2025-03-12T14:32:11 See commit

This commit introduces an experimental feature that allows React's Fragment component to accept a ref prop, enabling developers to attach references to Fragment instances. Unlike a previous implementation, this approach traverses from the Fragment's fiber during operation time rather than maintaining a set of children on the FragmentInstance. The new mechanism facilitates the application of event listeners and observers to newly added or removed child nodes, treating these updates as effects. The initial implementation includes basic Element-like API functionalities such as addEventListener, removeEventListener, and focus, with plans for further expansion in future updates.

By leveraging this functionality, developers can manage groups of elements more efficiently, particularly in complex component trees or when integrating with third-party libraries. For example, using a ref on a Fragment allows event listeners to be applied to its immediate child elements, while skipping nested components. This commit lays the groundwork for feedback and further enhancements, as it sets up a system to interact with Fragment children in a more streamlined manner.

Files changed

  • packages/react-art/src/ReactFiberConfigART.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.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/ReactChildFiber.js
  • packages/react-reconciler/src/ReactFiberBeginWork.js
  • packages/react-reconciler/src/ReactFiberCommitEffects.js
  • packages/react-reconciler/src/ReactFiberCommitHostEffects.js
  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
  • packages/react-test-renderer/src/ReactFiberConfigTestHost.js
  • packages/react/src/__tests__/ReactElementValidator-test.internal.js
  • packages/react/src/__tests__/ReactJSXElementValidator-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-dynamic.js
  • packages/shared/forks/ReactFeatureFlags.www.js
2025-03-12T21:49:44 See commit

This commit introduces a new DOM fixture page designed to test Fragment References (Fragment Refs) within a React application. The primary focus of the initial test case is to validate the functionality of addEventListener and removeEventListener for elements wrapped in a Fragment. The implementation includes a FragmentRefsPage component that sets up event listeners on child components, allowing users to interact with the child elements and observe alerts when they are clicked. Additionally, users can dynamically add or remove child elements and event listeners, ensuring that the event handling behaves as expected.

To utilize this new fixture, developers must set enableFragmentRefs to __EXPERIMENTAL__ and rebuild the application. The commit also includes minor modifications to the Header component to incorporate a link to the new Fragment Refs page, as well as updates to the CSS for improved styling of the card elements that represent the children within the Fragment. Overall, this addition enhances the testing capabilities for Fragment Refs in the React library.

Files changed

  • fixtures/dom/src/components/Header.js
  • fixtures/dom/src/components/fixtures/fragment-refs/index.js
  • fixtures/dom/src/style.css
2025-03-12T23:12:22 See commit

This commit focuses on running Prettier, a code formatting tool, on the eslint-plugin-react-compiler/src/types directory, specifically targeting the hermes-eslint.d.ts file. The changes made are primarily small formatting fixes, including adjustments to quotation marks and some minor edits to the code structure. These modifications are part of a larger effort to improve code readability and maintain consistency across the codebase, as indicated by the reference to a previous pull request (#32416) from which this work was extracted for easier review.

The commit includes contributions from co-author Michael Faith and highlights a few specific changes, such as switching from double quotes to single quotes for module declarations and modifying the formatting of type definitions. Overall, the commit underscores a commitment to maintaining high standards in code formatting while facilitating collaborative review processes.

Files changed

  • compiler/packages/eslint-plugin-react-compiler/src/types/hermes-eslint.d.ts
2025-03-12T23:12:45 See commit

This commit introduces a new prebuild option to the Rollup build process, allowing users to specify a command that will be executed before the actual bundle is created. This enhancement is part of an effort to improve the build process by enabling additional setup or configuration tasks to be performed prior to building, making it easier for developers to manage complex build requirements.

The implementation involves modifications to the build.js script, where a new function, runShellCommand, is added to execute the specified prebuild command. The build process is updated to check for the presence of a prebuild command in the bundle configuration and run it accordingly. This change is aimed at streamlining the build workflow and enhancing the flexibility of the Rollup tool.

Files changed

  • scripts/rollup/build.js
2025-03-13T01:43:06 See commit

In this commit, the react-compiler rule from the eslint-plugin-react-compiler has been successfully merged into the eslint-plugin-react-hooks plugin. To maintain the commit history of the moved files while keeping them in their original location until a future cleanup can be performed, the author utilized git mv to transfer the files and subsequently recreated them in their original positions as a separate commit. Although GitHub displays these moved files as new, the commit history remains intact in the IDE and through git blame.

Additionally, this change introduces new dependencies, one of which has a higher engines requirement for Node.js than the existing plugin, making this a breaking change that will necessitate a major release. The commit includes modifications to multiple configuration files, package definitions, and the addition of new test files related to the ReactCompiler rule, ensuring comprehensive testing and integration of the merged functionality.

Files changed

  • babel.config-react-compiler.js
  • compiler/apps/playground/yarn.lock
  • compiler/packages/babel-plugin-react-compiler/tsconfig.json
  • compiler/packages/babel-plugin-react-compiler/tsup.config.ts
  • compiler/yarn.lock
  • fixtures/eslint-v6/yarn.lock
  • fixtures/eslint-v7/yarn.lock
  • fixtures/eslint-v8/yarn.lock
  • fixtures/eslint-v9/yarn.lock
  • package.json
  • packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts
  • packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts
  • packages/eslint-plugin-react-hooks/package.json
  • packages/eslint-plugin-react-hooks/src/index.ts
  • packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts
  • packages/eslint-plugin-react-hooks/tsconfig.json
  • packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
  • scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
  • scripts/jest/config.base.js
  • scripts/react-compiler/build-compiler.sh
  • scripts/react-compiler/link-compiler.sh
  • scripts/rollup/build.js
  • scripts/rollup/bundles.js
  • yarn.lock