react changelog

Here's the latest scoop on the updates and improvements made to our codebase! We've been busy enhancing performance, fixing bugs, and streamlining processes to make everything run smoother and faster. Let's dive into the details of the most significant changes:

New Feature: Profiler Mode for Fixtures 🎉

We've simplified the component-level profiling process by adding a Profiler mode to fixtures, no longer requiring React DevTools installation. This change resolves previous inconsistencies and lets developers easily access performance insights by wrapping main application components within a Profiler component in the hydrateRoot calls. Say goodbye to confusion and hello to a streamlined profiling setup!

Improvement: Parcel Flight Client Enhancement 🚀

The Parcel Flight client now includes the prepareDestinationForModule function, ensuring components dynamically imported during rendering are preloaded effectively. The <Resources> component now inserts only <link> elements for stylesheets, leaving scripts to React. This change helps prevent Flash of Unstyled Content (FOUC) and opens up discussions for future improvements in resource management.

Improvement: Compiler Bundler Switch to esbuild 🛠️

We've switched the compiler's bundler from Rollup to esbuild, drastically reducing build times from 75 seconds to under 10 seconds! This change optimizes the build process for Node.js environments, making our development workflow more efficient. Out with the old, in with the new—esbuild is here to stay!

New Feature: Yield Every Other Frame for Transition/Retry Work 🎨

To improve performance during transitions and retries, we've introduced a new scheduling mechanism that yields every 25ms. This change helps prevent animations from hogging CPU time, ensuring smoother transitions and a more responsive user interface. While currently disabled by default, this feature represents a strategic move towards optimizing React's rendering performance.

Bugfix: DevTools Compiler Integration Test 🐛

We've fixed a pesky bug in the DevTools integration test related to version handling, specifically addressing a TypeError: Invalid Version: 19. The updated version condition in our script now correctly processes the version range, allowing the integration tests to run smoothly without any version validation hiccups.

Chore: ReactDOMFloat Test Refactor 🧹

We've split the ReactDOMFloat testing into its own pull request to better manage its complexity. This refactor enhances the clarity and maintainability of our tests, allowing for more focused reviews and discussions. It's all about keeping things organized and efficient!

These updates reflect our ongoing commitment to improving performance, enhancing user experience, and maintaining high-quality code standards. Stay tuned for more exciting developments!

Included Commits

2025-01-02T18:02:22 See commit

The commit titled "Yield every other frame for Transition/Retry work" introduces a new scheduling mechanism within React that aims to enhance performance during transitions and retries by managing how often the main thread yields. The shouldYield() logic has been integrated directly into React, allowing for better compatibility with postTask and eliminating the need for a global requestPaint(). The new approach yields every 25ms during transitions and retries, which helps to prevent animations and other frequent main thread tasks from interfering with critical rendering work, effectively reducing the frame rate of animations to approximately 30 fps while still maintaining responsiveness for user interactions.

Additionally, the commit modifies the yield timing heuristics, allowing for a 5ms yield for idle work to keep animations smooth while ensuring that more resource-intensive tasks, such as transitions, receive adequate processing time. This change is currently disabled by default, as other scheduling flags need to be rolled out first, but it represents a strategic move towards optimizing React's rendering performance and responsiveness in complex user interfaces. The commit also includes necessary updates to tests to accommodate these changes in scheduling behavior.

Files changed

  • packages/react-reconciler/src/ReactFiberWorkLoop.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-01-02T20:53:19 See commit

This commit focuses on separating the testing for ReactDOMFloat into its own pull request due to the size and complexity of the changes involved. The primary modification occurs in the test file located at packages/react-dom/src/__tests__/ReactDOMFloat-test.js, indicating that the testing structure or content related to ReactDOMFloat has been updated or refactored for better clarity and maintainability.

By isolating this component into a dedicated pull request, the developers aim to streamline the review process and enhance the overall organization of the codebase. This approach allows for more focused discussions and easier identification of issues related specifically to ReactDOMFloat, ultimately contributing to improved code quality and testing practices.

Files changed

  • packages/react-dom/src/__tests__/ReactDOMFloat-test.js
2025-01-02T21:59:56 See commit

This commit transitions the compiler's bundler from Rollup to esbuild, aiming to enhance build performance. The previous setup using Rollup introduced significant overhead, particularly as the majority of the packages are designed for Node.js environments with simpler bundling needs. By switching to esbuild, the build times have drastically improved, as evidenced by the before-and-after benchmarks, which show a reduction from approximately 75 seconds to just under 10 seconds for the entire build process.

In addition to the performance gains, this change involved removing Rollup configuration files and replacing them with new build scripts that leverage esbuild's capabilities. The commit reflects a broader effort to streamline the build process and optimize resource usage, ultimately resulting in a more efficient development workflow for the compiler and its associated packages.

Files changed

  • compiler/apps/playground/package.json
  • compiler/package.json
  • compiler/packages/babel-plugin-react-compiler/package.json
  • compiler/packages/babel-plugin-react-compiler/rollup.config.js
  • compiler/packages/babel-plugin-react-compiler/scripts/build.js
  • compiler/packages/eslint-plugin-react-compiler/package.json
  • compiler/packages/eslint-plugin-react-compiler/rollup.config.js
  • compiler/packages/eslint-plugin-react-compiler/scripts/build.js
  • compiler/packages/make-read-only-util/package.json
  • compiler/packages/make-read-only-util/scripts/build.js
  • compiler/packages/react-compiler-healthcheck/package.json
  • compiler/packages/react-compiler-healthcheck/rollup.config.js
  • compiler/packages/react-compiler-healthcheck/scripts/build.js
  • compiler/packages/react-compiler-runtime/package.json
  • compiler/packages/react-compiler-runtime/rollup.config.js
  • compiler/packages/react-compiler-runtime/scripts/build.js
  • compiler/packages/react-compiler-runtime/src/index.ts
  • compiler/packages/snap/package.json
  • compiler/scripts/release/shared/build-packages.js
  • compiler/yarn.lock
2024-12-28T07:01:49 See commit

This commit introduces a Profiler mode to the fixtures without requiring the React DevTools to be installed, addressing a previous inconsistency where profiling options depended on various setups. Previously, developers had to either install React DevTools, React Refresh, or add a Profiler component to enable component-level profiling, which led to confusion when different fixtures had varying dependencies. The change aims to simplify the process by allowing profiling to be activated directly through the inclusion of the Profiler component in the fixture code.

The modifications involve wrapping the main application components within a Profiler component in the hydrateRoot calls for both the flight and server-side rendering (SSR) fixtures. This enhancement streamlines the profiling setup and ensures that developers can easily access performance insights without additional prerequisites, ultimately improving the development experience.

Files changed

  • fixtures/flight/src/index.js
  • fixtures/ssr/src/index.js
2024-12-29T15:36:21 See commit

This commit addresses a bug in the DevTools integration test related to version handling. The test was failing with a TypeError: Invalid Version: 19, which was previously overlooked in a prior pull request. The issue stemmed from the version comparison logic in the script responsible for downloading the regression build.

The modification made in the download_devtools_regression_build.js script updates the version condition to correctly check for versions less than '19.0.0' instead of just '19'. This change ensures that the script properly identifies and processes the version range for React, allowing the integration tests to function correctly without errors related to version validation.

Files changed

  • scripts/ci/download_devtools_regression_build.js
2024-12-31T18:13:43 See commit

This commit introduces the prepareDestinationForModule function in the Parcel Flight client, following up on a previous enhancement. The update modifies the <Resources> component to solely handle the insertion of <link> elements for stylesheets and a bootstrap script when necessary, while delegating the responsibility of script insertion to React. This change ensures that components, which may be dynamically imported during rendering, are also preloaded effectively.

To prevent Flash of Unstyled Content (FOUC), CSS must be included in the RSC tree via the <Resources> component, requiring manual rendering in both the main page and any dynamically imported components. While there is a desire for React to automate this CSS insertion, the current implementation of prepareDestinationForModule is limited to client components and does not account for server component styles. The commit suggests potential future improvements, such as annotating components at code-splitting boundaries to specify their required resources, with ongoing discussions documented in the linked GitHub thread.

Files changed

  • fixtures/flight-parcel/package.json
  • fixtures/flight-parcel/src/server.tsx
  • fixtures/flight-parcel/types.d.ts
  • fixtures/flight-parcel/yarn.lock
  • packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-parcel.js
  • packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-parcel.js
  • packages/react-client/src/forks/ReactFlightClientConfig.dom-node-parcel.js
  • packages/react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js
  • packages/react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelBrowser.js
  • packages/react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelServer.js
  • scripts/flow/environment.js