react changelog

Hey there, code wizards! We've been busy brewing up some magical improvements and fixes in the React compiler. Here's what's new and improved in our latest update! 🚀✨

  • New Feature: Magical Fire Imports 🔥
    We've added an experimental feature that automatically sprinkles in import { useFire } from 'react' whenever you use the mystical "fire" syntax. This is still in the cauldron, bubbling away, and might not make it to the final potion, but it’s a step towards making your coding spells more powerful!

  • Improvement: Cast Those Types Like a Pro! 🪄
    The compiler now gracefully handles type cast expressions with references, eliminating those pesky false positives when a ref-accessing function is placed inside a type-cast array. Your type-casting magic just got a whole lot smoother!

  • Improvement: Keep Your Fires Inside! 🔥🏠
    We've tightened the rules to ensure that all fire calls are safely tucked inside effect lambdas. This prevents any rogue fires from causing chaos in your code. Plus, we've corrected the import path to keep everything neat and tidy.

  • Improvement: Rewriting the Rules of Fire 🔄
    When using fire in effect dependency arrays, we now ensure they’re literal arrays. This rewrite ensures your spells are precise and error-free, giving you clear feedback if things go astray.

  • Bugfix: Fixing the Fire Snap 🔧🔥
    We’ve fixed a broken snapshot related to the fire function, ensuring your useEffect hooks are structured correctly and work like a charm. No more compilation errors to worry about!

  • Bugfix: Yielding No More 🚫🛠️
    The enableYieldingBeforePassive feature has been turned off in internal test renderers, due to some hiccups on the React Native side. This is a temporary fix, ensuring smooth sailing while we iron out the kinks.

  • Chore: Cleaning Up the Unused Spells 🧹
    We’ve removed the unused toWarnDev function from the testing fixtures. It was just gathering dust, so we’ve tidied up to keep our codebase sparkling clean.

That’s it for now, folks! Keep coding, keep creating, and may your React adventures be nothing short of magical! 🧙‍♂️✨

Included Commits

2024-12-20T14:48:50 See commit

The recent commit disables the enableYieldingBeforePassive feature in the internal test renderers of React, as indicated by the changes made in two files: ReactFeatureFlags.test-renderer.native-fb.js and ReactFeatureFlags.test-renderer.www.js. This modification was implemented due to failing tests on the React Native side, which were obstructing the synchronization process. By turning off this feature, the team aims to address these issues temporarily.

In the code changes, the flag enableYieldingBeforePassive was set from true to false in both test renderer files, reflecting the decision to pause this functionality until the underlying problems with the tests are resolved. This adjustment is part of ongoing efforts to maintain stability and functionality within the testing framework while working through the challenges presented by the React Native environment.

Files changed

  • packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
2024-12-20T16:56:48 See commit

This commit updates the compiler to allow type cast expressions with references, addressing a previously reported false positive when a ref-accessing function is placed inside a type-cast array. The changes enhance the ref validation process to properly recognize and handle type casts, which previously caused issues in certain scenarios. The implementation includes modifications to the validation logic, specifically adding support for 'TypeCastExpression' cases, ensuring that references are correctly processed during type casting.

The commit also adds new test cases to verify the functionality of the updated ref validation in the context of type casts. With these changes, the compiler can now correctly handle cases where a function utilizing useRef is returned as a constant array, thereby improving the overall robustness of type handling in React applications. This commit ultimately closes issue #31864.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-type-cast-in-render.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-type-cast-in-render.js
2024-12-20T20:25:30 See commit

This commit introduces an experimental feature in the React compiler that adds the import statement import { useFire } from 'react' whenever the "fire" syntax is utilized in the code. The modification aims to enhance the handling of fire functions by ensuring that the necessary import is included when such syntax is detected. The changes include updates to several files within the compiler's Babel plugin, where flags and checks for the presence of fire rewrites are incorporated into the compilation process.

While this feature is currently experimental and may not be finalized for stable release, it reflects ongoing efforts to improve the React compilation process, particularly in relation to new syntax and functionality. The commit includes modifications to the environment settings, code generation functions, and tests to ensure that the new behavior is correctly implemented and verified.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/Transform/TransformFire.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/basic.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/deep-scope.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/multiple-scope.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repeated-calls.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/shared-hook-calls.expect.md
2024-12-20T21:55:01 See commit

This commit focuses on improving the compilation process within the React compiler by ensuring that all calls to the fire function are properly encapsulated within effect lambdas. It introduces a traversal mechanism through compiled functions to identify any instances of fire that are incorrectly used outside of effect contexts, which could lead to compilation errors. Additionally, the commit corrects the import path for useFire, changing it from importing directly from "react" to importing from "react/compiler-runtime," streamlining the dependency structure.

The changes also include the addition of error handling to enforce the correct usage of fire within effects. New tests have been implemented to validate that mixing fire calls with regular function calls within the same effect will trigger appropriate compilation errors. Overall, this commit enhances the robustness of the React compiler by enforcing stricter rules on the use of fire, thereby preventing potential runtime issues and ensuring that the code adheres to the intended usage patterns.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/Transform/TransformFire.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/basic.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/deep-scope.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/multiple-scope.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repeated-calls.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/shared-hook-calls.expect.md
2024-12-20T22:16:59 See commit

This commit focuses on enhancing the behavior of the React compiler by rewriting effect dependency arrays that utilize the fire binding. The primary goal is to ensure that when an effect (such as useEffect) employs fire, its dependency array must be a literal array, rather than a variable or a spread operator. The changes introduce error handling to enforce this rule, ensuring that developers receive clear feedback when they attempt to use non-literal arrays as dependencies for effects that involve fire.

The commit includes updates to various test fixtures and the core transformation logic within the compiler. It adds new tests to validate scenarios where developers incorrectly use dependency arrays, providing expected error messages. Additionally, the transformation logic has been modified to keep track of array expressions, rewriting them to use the appropriate fire function bindings. This ensures that the compiler can accurately handle and rewrite dependencies in compliance with the new rules, ultimately improving the robustness of the React effect management system.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Transform/TransformFire.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/fire-and-autodeps.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/fire-and-autodeps.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/rewrite-deps.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/rewrite-deps.js
2024-12-23T23:11:04 See commit

The commit titled "Remove toWarnDev from fixtures/dom" addresses the removal of the unused toWarnDev function from the testing fixtures in the React codebase. The change specifically modifies the nested-act-test.js file by deleting two lines that included the toWarnDev extension, which was never utilized in the tests.

This modification streamlines the code by eliminating unnecessary elements, contributing to cleaner and more maintainable test files. The commit notes that the toWarnDev function was never actually used, referencing a previous commit link to support this conclusion. Overall, this change reflects an effort to enhance code quality by removing obsolete code components.

Files changed

  • fixtures/dom/src/__tests__/nested-act-test.js
2024-12-26T19:58:37 See commit

This commit addresses an issue with the fire function in the React compiler's Babel plugin, specifically related to the use of the useEffect hook. The previous implementation had a syntax that caused a compilation error due to the incorrect use of the dependency array. The fix modifies the way the useEffect hook is structured, ensuring that the fire function is called correctly within the effect, while maintaining the necessary dependencies.

The changes involve reformatting the useEffect function to properly encapsulate the fire(foo(props)) call within an arrow function, followed by the correct usage of the dependency array. This adjustment resolves the compilation error that occurred when using the fire function, allowing for the expected behavior without triggering invariants related to the dependency array. The commit includes modifications to the test fixtures to reflect these changes.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.expect.md