react changelog

Hey there, code adventurers! We've got some exciting updates and bug squashes in our latest changelog. Dive in to see what's new and improved in the world of React! 🚀

  • New feature: Say hello to the react-server-dom-parcel-package! This shiny new package integrates React Server Components (RSC) with the Parcel bundler, making your life easier by combining client and server modules into a single graph. No more separate manifest files, and CSS gets combined automatically! Plus, a special <Resources> component is generated to handle scripts and stylesheets. 🎉

  • Improvement: We've enhanced the scheduling of hydration work by using Hydration Lanes. This ensures hydration tasks don't mix with other updates, preventing unnecessary client rendering. A new feature flag, enableHydrationLaneScheduling, lets you experiment with this approach safely. 💧

  • Improvement: The enableOwnerStacks feature is now dynamic! This means you can toggle it on or off during development, giving you more control over captureOwnerStack behavior. We've updated tests to reflect this change, ensuring accurate console error messages based on the flag's state. 🔄

  • Improvement: Our compiler now supports non-declaration initializations in for...of and for...in loops. This enhancement allows for more complex patterns without hitting error states, making your code more flexible and robust. 🛠️

  • Bugfix: Fixed a pesky issue where refs were being dropped when using spread properties in JSX. Now, both the ref and spread properties are combined correctly in the output, ensuring your components work as intended. 🐛

  • New feature: The react-server-dom-parcel package is going public! We've removed the "private" attribute, paving the way for broader access and integration into meta-frameworks. 🌐

  • Bugfix: We've fixed the canary version strings by reverting the canaryChannelLabel back to 'canary'. This ensures correct version names and tags after the stable release of version 19. 📦

  • Chore: Updated version numbers for prerelease channels, including canary and experimental versions. This keeps everything in sync and up-to-date with the latest improvements and fixes. 🔢

That's all for now, folks! Keep coding and stay tuned for more awesome updates. Happy hacking! 💻✨

Included Commits

2024-12-09T18:48:43 See commit

This commit introduces support for non-declaration initializations in for...of and for...in loops within the React compiler's Babel plugin. The changes involve modifying the lowerStatement function to handle scenarios where the left-hand side of the loop is not a variable declaration but rather a left-hand value (lval). The commit replaces previous error handling with assertions that ensure the left side is an lval, allowing for the assignment of iterator values directly to lvals. This enhancement improves the flexibility of the loop constructs in the compiler, enabling more complex patterns to be used without falling back to error states.

Additionally, the commit removes several TODO comments that indicated unhandled cases for various initialization patterns in for...of and for...in statements, reflecting the completed implementation of these features. The modifications consist of adding new temporary value assignments for iterators and properties, which are crucial for correctly managing the iteration process. Overall, the changes enhance the compiler's capability to process a broader range of JavaScript syntax, improving the robustness and usability of the Babel plugin for React.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md
2024-12-10T21:11:17 See commit

This commit addresses a bug in the React compiler related to the handling of refs when using spread properties in JSX. Specifically, when a component is rendered with a ref and spread props, the optimization that allows for a spread-props-only object was incorrectly implemented, leading to the ref being dropped from the output. The previous output would only include the spread properties, omitting the ref entirely, which is not the desired behavior.

The fix modifies the logic in the InlineJsxTransform to ensure that when both a ref and spread properties are present, the output correctly combines them into a single props object. This change ensures that the resulting object includes both the ref and the spread properties, thus maintaining the intended functionality. The commit also includes updates to test cases to validate this behavior, ensuring that the ref is preserved in scenarios where it is used alongside spread props.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js
2024-12-11T17:00:25 See commit

The commit titled "Make enableOwnerStacks dynamic" enhances the React library by implementing a dynamic feature flag for enableOwnerStacks. This change allows the feature to be toggled on or off during development, providing better control over the behavior of the captureOwnerStack function. The commit modifies several files, including ReactFeatureFlags and various React components, to conditionally export the captureOwnerStack function based on the status of the enableOwnerStacks flag. This adjustment aims to improve feature detection and testing capabilities within the React framework.

Additionally, the commit includes updates to existing tests to ensure they accurately reflect the new dynamic nature of enableOwnerStacks. The tests now assert console error messages based on the flag's state, ensuring that developers receive appropriate warnings when using legacy context APIs. Overall, these changes enhance the flexibility and usability of React's debugging and development tools, while also maintaining compatibility with legacy features as the library evolves.

Files changed

  • packages/react/index.fb.js
  • packages/react/src/ReactServer.fb.js
  • packages/react/src/__tests__/ReactStrictMode-test.js
  • packages/react/src/__tests__/createReactClassIntegration-test.js
  • packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
  • packages/shared/forks/ReactFeatureFlags.native-fb.js
  • packages/shared/forks/ReactFeatureFlags.www-dynamic.js
  • packages/shared/forks/ReactFeatureFlags.www.js
2024-12-12T03:58:51 See commit

This commit introduces the react-server-dom-parcel-package, which integrates React Server Components (RSC) with the Parcel bundler. The implementation largely mirrors existing integrations with Webpack and Turbopack, but it leverages Parcel's runtime APIs for loading and executing bundles. A key feature is that client and server modules are part of a single graph, utilizing Parcel's environments to differentiate them. The server acts as the build entry point, rendering server components in route handlers, while client bundles are created dynamically when a "use client" directive is encountered. Additionally, CSS from both client and server components is automatically combined, and a <Resources> component is generated to handle the necessary <script> and <link rel="stylesheet"> elements.

The commit also addresses some implementation challenges, such as testing within the React repository and managing TypeScript types. While integration tests will be conducted in Parcel, the author expresses concerns about the complexity of setting up mocks and environments in the React repo. They also seek guidance on the best approach for maintaining TypeScript types, preferring to avoid duplication across multiple repositories. The commit includes numerous changes, including the addition of several new files and updates to existing configurations, signaling a significant step forward in supporting RSCs with Parcel.

Files changed

  • .eslintrc.js
  • ReactVersions.js
  • fixtures/flight-parcel/.gitignore
  • fixtures/flight-parcel/.parcelrc
  • fixtures/flight-parcel/package.json
  • fixtures/flight-parcel/src/Dialog.tsx
  • fixtures/flight-parcel/src/TodoCreate.tsx
  • fixtures/flight-parcel/src/TodoDetail.tsx
  • fixtures/flight-parcel/src/TodoItem.tsx
  • fixtures/flight-parcel/src/TodoList.tsx
  • fixtures/flight-parcel/src/Todos.css
  • fixtures/flight-parcel/src/Todos.tsx
  • fixtures/flight-parcel/src/actions.ts
  • fixtures/flight-parcel/src/client.tsx
  • fixtures/flight-parcel/src/server.tsx
  • fixtures/flight-parcel/tsconfig.json
  • 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/README.md
  • packages/react-server-dom-parcel/client.js
  • packages/react-server-dom-parcel/index.js
  • packages/react-server-dom-parcel/npm/client.browser.js
  • packages/react-server-dom-parcel/npm/client.edge.js
  • packages/react-server-dom-parcel/npm/client.js
  • packages/react-server-dom-parcel/npm/client.node.js
  • packages/react-server-dom-parcel/npm/index.js
  • packages/react-server-dom-parcel/npm/server.browser.js
  • packages/react-server-dom-parcel/npm/server.edge.js
  • packages/react-server-dom-parcel/npm/server.node.js
  • packages/react-server-dom-parcel/package.json
  • packages/react-server-dom-parcel/server.browser.js
  • packages/react-server-dom-parcel/server.edge.js
  • packages/react-server-dom-parcel/server.node.js
  • packages/react-server-dom-parcel/src/ReactFlightParcelReferences.js
  • packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js
  • packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js
  • packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js
  • packages/react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js
  • packages/react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js
  • packages/react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler.js
  • packages/react-server-dom-parcel/src/server/react-flight-dom-server.browser.js
  • packages/react-server-dom-parcel/src/server/react-flight-dom-server.browser.stable.js
  • packages/react-server-dom-parcel/src/server/react-flight-dom-server.edge.js
  • packages/react-server-dom-parcel/src/server/react-flight-dom-server.edge.stable.js
  • packages/react-server-dom-parcel/src/server/react-flight-dom-server.node.js
  • packages/react-server-dom-parcel/src/server/react-flight-dom-server.node.stable.js
  • packages/react-server-dom-parcel/src/shared/ReactFlightClientConfigBundlerParcel.js
  • packages/react-server-dom-parcel/src/shared/ReactFlightImportMetadata.js
  • packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-parcel.js
  • packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-parcel.js
  • packages/react-server/src/forks/ReactFlightServerConfig.dom-node-parcel.js
  • scripts/flow/environment.js
  • scripts/rollup/bundles.js
  • scripts/rollup/validate/eslintrc.cjs.js
  • scripts/rollup/validate/eslintrc.cjs2015.js
  • scripts/rollup/validate/eslintrc.esm.js
  • scripts/shared/inlinedHostConfigs.js
2024-12-12T19:10:46 See commit

This commit updates the version numbers for several packages in the React ecosystem, specifically targeting the prerelease channels, including canary and experimental versions. The changes reflect an increment in version numbers for various packages such as eslint-plugin-react-hooks, jest-react, and several others, with updates ranging from minor to patch versions. For instance, eslint-plugin-react-hooks is updated from version 5.0.0 to 5.2.0, and react and react-dom both move from 19.0.0 to 19.1.0. Additionally, the scheduler package is updated from version 0.23.0 to 0.25.0.

The commit also modifies the ReactVersion.js file to reflect the new version number of '19.1.0', ensuring that all relevant components are synchronized with the latest versioning. The changes are co-authored by Jack Pope and involve updates to the yarn.lock file as well, indicating that the dependencies have been adjusted accordingly. Overall, this commit serves to keep the React packages up-to-date with the latest improvements and fixes, enhancing stability and functionality for developers working with these libraries.

Files changed

  • ReactVersions.js
  • packages/eslint-plugin-react-hooks/package.json
  • packages/jest-react/package.json
  • packages/react-art/package.json
  • packages/react-dom-bindings/package.json
  • packages/react-dom/package.json
  • packages/react-is/package.json
  • packages/react-markup/package.json
  • packages/react-native-renderer/package.json
  • packages/react-reconciler/package.json
  • packages/react-refresh/package.json
  • packages/react-server-dom-esm/package.json
  • packages/react-server-dom-fb/package.json
  • packages/react-server-dom-turbopack/package.json
  • packages/react-server-dom-webpack/package.json
  • packages/react-test-renderer/package.json
  • packages/react/package.json
  • packages/scheduler/package.json
  • packages/shared/ReactVersion.js
  • packages/use-subscription/package.json
  • packages/use-sync-external-store/package.json
  • yarn.lock
2024-12-12T19:11:24 See commit

This commit addresses an issue with the versioning of canary releases in the React project by reverting the canaryChannelLabel from 'rc' back to 'canary'. This change ensures that the version names and tags are correctly formatted following the stable release of version 19, allowing for clearer differentiation between release candidates (RCs) and canary versions.

The modifications made in the ReactVersions.js file include changing the canaryChannelLabel to 'canary' and resetting the rcNumber from 1 to 0. These adjustments help maintain consistency in the versioning scheme and clarify the labeling of canary releases, which are intended for testing and experimentation prior to stable releases.

Files changed

  • ReactVersions.js
2024-12-12T20:26:03 See commit

The commit titled "[Flight Parcel] Remove private package (#31746)" involves the modification of the package.json file for the react-server-dom-parcel package. The key change in this commit is the removal of the "private" attribute, which indicates that the package will now be publicly available for publishing, rather than being restricted for internal use only.

By making this change, the package is set to be integrated into meta-frameworks, allowing broader access and usage within the React ecosystem. This move may facilitate collaboration and adoption of the package among developers looking to utilize React Server Components in their applications.

Files changed

  • packages/react-server-dom-parcel/package.json
2024-12-13T04:06:07 See commit

This commit introduces a significant improvement in the scheduling of hydration work within the React framework by utilizing Hydration Lanes instead of raw update lanes when initiating root hydration and using the unstable_scheduleHydration function. The primary goal is to prevent the mixing of hydration tasks with other types of updates, which can lead to unnecessary client rendering during hydration. By ensuring that hydration processes are handled exclusively through appropriate lanes, the commit resolves issues where updates could inadvertently trigger client rendering while the root is still in the hydration phase.

Additionally, the commit addresses potential performance concerns by streamlining how hydration and updates are processed. It adds a new feature flag, enableHydrationLaneScheduling, to allow for controlled experimentation with this new scheduling approach, although it is deemed safe given the infrequent use of unstable_scheduleHydration. The changes include modifications to several files, enhancing the scheduling logic and providing test cases to verify that updates occurring at the same priority as initial hydration do not cause client renders. Overall, this update aims to improve the efficiency and reliability of hydration in React applications.

Files changed

  • packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
  • packages/react-reconciler/src/ReactFiberLane.js
  • packages/react-reconciler/src/ReactFiberReconciler.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