react changelog

Welcome to the latest React updates, where we've been busy making things smoother, faster, and just all-around better! 🚀 Let's dive into the highlights:

New feature

  • Meta Magic! We've added a shiny new target option, target: 'donotuse_meta_internal', specifically for Meta bundles. This allows for direct imports of useMemoCache from the react package, making life easier for Meta applications by ensuring compatibility and up-to-date React features. 🎉

Improvement

  • Suspense No More! We've tackled an issue with Suspense boundaries during server-side rendering (SSR). Now, if the server stream is incomplete, React will schedule client renders for any unfinished Suspense boundaries once the document fully loads. This ensures your app doesn't get stuck in a fallback state. 🛠️

  • Default Imports Delight: The React compiler now supports default imports in the autodependency config. This means you can smoothly import functions like import useWrapperEffect from 'useWrapperEffect', making dependency management a breeze. 🌬️

  • Refine those Refs: We've improved the React compiler by skipping .current field accesses in inferred dependency arrays. This change helps avoid incorrect dependency tracking, enhancing the reliability of your effect hooks. 🔧

Bugfix

  • Typo Tidy-Up: We've fixed a couple of typos in the CHANGELOG.md, ensuring clarity and professionalism in our documentation. Because every letter counts! 📝

  • Back to Basics: A previous update to eslint-plugin-react-compiler has been reverted due to compatibility issues with older Babel versions. This ensures that older codebases can continue to function without hiccups. 🔄

These updates reflect our ongoing commitment to improving React's performance and developer experience. Keep coding, and enjoy the new features and fixes! 🎈

Included Commits

2024-12-02T22:42:58 See commit

This commit introduces a new target option, target: 'donotuse_meta_internal', specifically for Meta bundles within the React compiler. This option allows the direct import of useMemoCache from the react package, which is only applicable to Meta bundles due to their unique compatibility and bundling requirements. Other targets will continue to use imports from react/compiler-runtime or react-compiler-runtime based on their respective versions. The change aims to streamline the import process for Meta applications while ensuring that these applications can leverage the latest React runtime and compiler features without compatibility issues.

Additionally, the commit modifies the type definitions and logic for handling different target options within the React compiler, ensuring that the new target is properly validated and integrated into the existing framework. Tests have also been added to confirm the functionality of the new target option. Overall, this enhancement reflects an effort to improve the development experience for Meta applications by simplifying their internal module resolution and import processes.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag-meta-internal.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag-meta-internal.js
  • compiler/packages/snap/src/SproutTodoFilter.ts
  • compiler/packages/snap/src/compiler.ts
2024-12-03T12:42:28 See commit

This commit modifies the behavior of the React compiler by excluding accesses to the .current field from inferred dependency arrays in effect hooks. The change aims to prevent potential issues that arise when .current is accessed from refs, which could lead to incorrect dependency tracking. Although this may result in some over-capturing for objects with a current property that are not refs, the commit notes that this scenario is expected to be rare, and the effects should remain idempotent. In cases where precise dependency tracking is required, developers can still manually specify the dependency array.

The update involves changes to the InferEffectDependencies.ts file, where the logic for writing dependencies has been adjusted to skip .current accesses. Additionally, new test fixtures have been added to validate this behavior, ensuring that the compiler correctly handles the exclusion of .current in various scenarios involving refs. Overall, this commit enhances the reliability of effect dependencies in React applications by refining how the compiler interprets field accesses.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Inference/InferEffectDependencies.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-ref-helper.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-ref-helper.js
2024-12-03T12:42:53 See commit

This commit introduces support for default imports in the autodependency configuration of the React compiler, specifically allowing developers to use default imports such as import useWrapperEffect from 'useWrapperEffect'. The changes were made across several files, notably in the Environment.ts and InferEffectDependencies.ts files, where the handling of default imports was integrated into the dependency inference logic. This enhancement enables the compiler to recognize and properly manage dependencies for functions that are imported as defaults, streamlining the process for developers.

Additionally, a new utility function, useEffectWrapper, was created to facilitate the use of the useEffect hook with automatic dependency tracking. This function is designed to wrap the provided effect function, ensuring that it is executed within the appropriate React lifecycle while maintaining the necessary dependencies. The commit includes modifications to existing tests and introduces new testing fixtures to validate the functionality of the new default import support and the useEffectWrapper, thereby improving the overall developer experience in managing effect dependencies in React components.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
  • compiler/packages/babel-plugin-react-compiler/src/Inference/InferEffectDependencies.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies.js
  • compiler/packages/snap/src/compiler.ts
  • compiler/packages/snap/src/sprout/useEffectWrapper.ts
  • compiler/packages/snap/src/types.d.ts
2024-12-03T16:46:08 See commit

This commit reverts a previous change that replaced a deprecated dependency in the eslint-plugin-react-compiler. The original update introduced @babel/plugin-proposal-private-methods, but it has been found to be incompatible with versions of @babel/traverse that are older than 7.25. This incompatibility poses a challenge for internal partners who utilize an older Babel version, as well as for some open-source software (OSS) projects that may still rely on these outdated versions.

The changes made in this commit involve modifications to the Rollup configuration and the ReactCompilerRule TypeScript file. The reverted changes include restoring the previous dependency on @babel/plugin-transform-private-methods, ensuring compatibility with existing codebases and preventing potential issues for users on older Babel versions. The commit highlights a careful consideration of backward compatibility in the development process.

Files changed

  • compiler/packages/eslint-plugin-react-compiler/rollup.config.js
  • compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
2024-12-03T21:13:35 See commit

This commit addresses an issue in React's handling of Suspense boundaries during the hydration phase of server-side rendering (SSR). When streaming SSR, React waits for Suspense boundaries to be revealed by the server before attempting to hydrate them. However, if the connection is interrupted or a server error occurs, it can lead to a situation where the Suspense boundary remains unresolved, freezing the component in a fallback state. To mitigate this, the update introduces a mechanism that schedules client renders for any unfinished Suspense boundaries once the document has fully loaded, ensuring that hydration can proceed even if the server stream is incomplete.

Additionally, the commit enhances testing capabilities by implementing a mock of JSDOM that simulates the document's readyState. This mock allows for dynamic changes to the readyState, enabling more accurate tests that reflect real browser behavior without complicating the testing process. The changes involve modifications to various files, including updates to internal test utilities and adjustments in the React DOM bindings, ensuring a smoother and more reliable hydration process for Suspense boundaries.

Files changed

  • packages/internal-test-utils/ReactJSDOM.js
  • packages/internal-test-utils/ReactJSDOMUtils.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
  • packages/react-dom/src/__tests__/ReactDOMFloat-test.js
  • packages/react-dom/src/test-utils/FizzTestUtils.js
  • scripts/jest/ReactDOMServerIntegrationEnvironment.js
  • scripts/jest/ReactJSDOMEnvironment.js
  • scripts/jest/config.base.js
  • scripts/jest/setupTests.js
2024-12-05T23:03:24 See commit

This commit addresses two typographical errors in the CHANGELOG.md file related to the React library. Specifically, it corrects the spelling of "startTransition" and the word "designed," which were previously misspelled as "startTranstion" and "design," respectively. These changes enhance the clarity and professionalism of the documentation, ensuring that users and developers can accurately understand the features and updates detailed within the changelog.

The modifications occur within the context of significant updates to React's features and APIs, including the introduction of new hooks like useActionState and useOptimistic, as well as new APIs for static site generation. By fixing these typos, the commit contributes to maintaining the quality and reliability of the documentation as the React ecosystem evolves.

Files changed

  • CHANGELOG.md