react changelog

Here's a fun and exciting changelog update for you! 🎉 We've got some cool new features and improvements that are sure to make your coding experience even more delightful. Let's dive into the latest changes:

  • New feature: Infer deps configuration 🌟
    Introducing a snazzy new way to configure dependency inference for React effect hooks! This experimental feature lets you specify which functions to analyze for dependencies based on their module and required arguments. Whether it's useEffect from React or a custom useExperimentalEffect hook, your dependencies are now smartly appended to the argument list. Get ready for a smoother coding experience! 🚀

  • Improvement: Conditional export of useResourceEffect 🔄
    We've made it easier to detect the presence of useResourceEffect by conditionally exporting it based on a feature flag. This update brings clarity and flexibility, allowing you to use this hook only when the enableUseResourceEffectHook flag is enabled. Say goodbye to confusion and hello to streamlined feature management! 🎯

  • Improvement: Mark all lanes in order on every new render 🛤️
    No more missing out on performance lanes! We've ensured that all four lanes are displayed in the correct priority order, even if they're not actively used. This update helps you visualize all your options and keep track of performance metrics accurately. All aboard the performance train! 🚂

  • New feature: First cut at dep inference 🧩
    We're exploring the future of effect dependency management with an initial prototype that automatically infers dependencies for useEffect calls lacking a dependency array. Although it's still in the research phase, this feature lays the groundwork for a more automated approach to managing effect dependencies. Stay tuned for more exciting developments! 🔍

  • Improvement: Prune unused array destructure items during DCE ✂️
    Our Dead Code Elimination process just got an upgrade! We can now prune unused items from array patterns more effectively, replacing them with "holes" when necessary. This enhancement is especially handy for identifying unused useState destructured items, helping you maintain best practices effortlessly. Clean code, happy code! 🧹

  • New feature: Add moveBefore Experiment 🔄
    Say goodbye to state loss when reordering stateful nodes! The moveBefore() function is here to preserve state during node reordering. Although still experimental, this feature promises to solve a long-standing issue in React. Keep an eye out for this game-changer! 👀

  • Chore: Replace deprecated dependency in eslint-plugin-react-compiler 🛠️
    We've swapped out a deprecated Babel plugin dependency to keep things fresh and up-to-date. By replacing @babel/plugin-proposal-private-methods with @babel/plugin-transform-private-methods, we're ensuring compatibility with the latest Babel features. Your codebase is now healthier and happier! 🌱

That's all for now, folks! Keep coding and enjoy the new features and improvements. Until next time! 👋

Included Commits

2024-11-22T17:15:13 See commit

This commit introduces an initial prototype for inferring effect dependencies in a React compiler, aimed at gathering feedback on the proposed approach rather than releasing a new feature immediately. The implementation focuses on detecting useEffect calls that lack a dependency array, automatically inserting inferred dependencies when a lambda function is used as the first argument. The author acknowledges that this is a preliminary step and highlights potential challenges ahead, particularly in cases where memoization might complicate dependency inference.

Additionally, the commit raises questions regarding the handling of multiple instructions within a block containing a useEffect and whether further considerations are necessary for resolving the first argument beyond simply identifying the lvalue's identifier. The changes include modifications to various files within the Babel plugin for the React compiler, as well as the addition of multiple test fixtures to validate the new inference logic. Overall, this commit serves as a foundation for exploring a more automated method of managing effect dependencies in React applications.

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/Inference/InferEffectDependencies.ts
  • compiler/packages/babel-plugin-react-compiler/src/Inference/index.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/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-dep.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-dep.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-ref.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-ref.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-function.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-function.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/pruned-nonreactive-obj.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/pruned-nonreactive-obj.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-memberexpr-merge.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-memberexpr-merge.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-memberexpr.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-memberexpr.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-optional-chain.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-optional-chain.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-variable.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-variable.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-import-namespace-useEffect.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-import-namespace-useEffect.js
  • compiler/packages/snap/src/compiler.ts
2024-11-22T18:04:05 See commit

This commit introduces a workaround that ensures all four performance lanes are displayed in the correct priority order, regardless of whether there are any active tracks in them. The primary goal is to visually represent all available options to users, even if they are not currently utilized. The implementation involves creating fake markers for each lane at a start time of zero, which allows the Scheduler track group to maintain the correct ordering based on priority.

Additionally, the commit addresses inconsistencies in how performance metrics are recorded, noting that while performance.mark() entries are recorded in first insertion order, performance.measure() entries appear in reverse order. By continually marking the lanes at the start of each render, the system can ensure that all tracks are represented, regardless of when recording begins. This method is crucial for maintaining accurate performance tracking and providing developers with insight into the lanes available for optimization.

Files changed

  • packages/react-reconciler/src/ReactFiberPerformanceTrack.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
2024-11-22T18:24:29 See commit

The commit introduces the moveBefore experiment to React, addressing a long-standing issue where reordering stateful nodes could result in the loss of their state. The moveBefore() function, akin to insertBefore, is designed to preserve the state of the nodes being moved. Although the feature has advanced to the "intent-to-ship" stage and is currently available in a demo, it remains disabled by default due to its experimental status and a semantic breaking change that occurs when both nodes are disconnected.

The implementation includes modifications to various React files, primarily to check for support of moveBefore before using it. The feature is enabled in React Native, but it is still turned off in other contexts because of the potential for errors when nodes are disconnected. The commit emphasizes the need for further adjustments, either to wait for a Chrome implementation that accommodates disconnected nodes or to incorporate error handling via try/catch before enabling the feature in experimental builds.

Files changed

  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.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
2024-11-22T20:59:59 See commit

The commit titled "[compiler] Prune all unused array destructure items during DCE" introduces an enhancement to the Dead Code Elimination (DCE) process within the compiler. Previously, DCE could only remove unused items from the end of array patterns, but now it can replace any unused items with "holes," allowing for more comprehensive pruning. This improvement is particularly useful in scenarios involving React's useState hook, where either the state or the setter function may go unused, signaling potential violations of best practices. By eliminating these unused destructured items, the compiler can better identify cases where values are being ignored.

This change is a reimplementation of a previous pull request that did not utilize the ghstack, and it modifies several files in the Babel React compiler package. The updates include adjustments to the DCE logic in the DeadCodeElimination.ts file, as well as changes to various test fixtures to ensure compatibility with the new behavior. Overall, this commit enhances the compiler's ability to optimize code by effectively managing unused destructured array elements.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-destructured-rest-element.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-lambda.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-undefined-expression-of-jsxexpressioncontainer.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-middle-element.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useReducer-returned-dispatcher-is-non-reactive.expect.md
2024-11-22T21:13:42 See commit

This commit introduces a conditional export for the useResourceEffect hook in the React library, allowing it to be exported only when a specific feature flag (enableUseResourceEffectHook) is enabled. This change addresses the current challenge of feature detection for useResourceEffect, which was always included in the exports, making it difficult to determine its availability. By implementing this conditional behavior, the code enhances flexibility and clarity regarding the use of this hook based on feature flags.

The modifications include updates to both the test file ReactHooksWithNoopRenderer-test.js and the main React client file ReactClient.js. In the test file, a new test case checks that useResourceEffect is undefined when the flag is disabled, ensuring that the feature behaves as expected in different configurations. In the client file, the export statement for useResourceEffect is altered to conditionally export it based on the presence of the feature flag, improving the overall modularity of the library.

Files changed

  • packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
  • packages/react/src/ReactClient.js
2024-11-22T22:19:20 See commit

The commit titled "Infer deps configuration" introduces a new feature in the compiler that allows for configurable inference of dependencies for React effect hooks. This experimental feature enables users to specify which functions to analyze for dependencies based on their module and the number of required arguments. For instance, the configuration allows for the insertion of dependencies for the useEffect hook from React if it receives a single argument and for a custom hook useExperimentalEffect from MyExperimentalEffectHooks if it receives two arguments. The inferred dependencies are then appended to the argument list of the respective function calls.

The changes include modifications to various files in the Babel plugin for React, with a focus on updating the inference logic to accommodate user-defined configurations. The commit also adds new test cases to validate this functionality, ensuring that the dependency inference behaves as expected under different scenarios. Overall, this enhancement aims to facilitate experimentation with effect dependencies in React applications, providing developers with more control over how dependencies are inferred and inserted.

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/Inference/InferEffectDependencies.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-deps-custom-config.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-deps-custom-config.js
  • 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/shared-runtime.ts
2024-11-25T04:32:11 See commit

This commit updates the eslint-plugin-react-compiler package by replacing a deprecated Babel plugin dependency. Specifically, it substitutes @babel/plugin-proposal-private-methods (version 7.18.6) with @babel/plugin-transform-private-methods (version 7.25.9) in the package.json file, along with corresponding changes in the rollup.config.js and ReactCompilerRule.ts files. The update aims to ensure that the package remains compatible with the latest Babel features and avoids issues related to deprecated dependencies.

In addition to the plugin replacement, the commit also modifies the yarn.lock file to reflect the updated versions of various Babel-related packages, ensuring consistency across the project. This change is part of maintaining the overall health of the codebase by keeping dependencies up to date and reducing the risk of potential conflicts or bugs arising from deprecated libraries.

Files changed

  • compiler/packages/eslint-plugin-react-compiler/package.json
  • compiler/packages/eslint-plugin-react-compiler/rollup.config.js
  • compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
  • compiler/yarn.lock