react changelog

This commit introduces a new global variable, __IS_NATIVE__, which is specifically designed to differentiate the backend implementation for the react-devtools-core package used in React Native. The variable will only be set to true for this package, allowing for a tailored experience for React Native developers. The commit suggests that a more appropriate name for this global could be react-devtools-native, while maintaining react-devtools-core as a host-agnostic package.

Additionally, the changes made in this commit will influence how the next release of react-devtools-core handles error reporting. Specifically, the component stack will be appended as an Error object rather than a string, and the suffix (<anonymous>) will be added to component stack frames, enhancing the clarity and utility of error messages for developers working with React Native. The commit includes modifications across various configuration files and backend implementations to integrate this new global variable effectively.

Files changed

• .eslintrc.js
• packages/react-devtools-core/webpack.backend.js
• packages/react-devtools-extensions/webpack.backend.js
• packages/react-devtools-extensions/webpack.config.js
• packages/react-devtools-inline/webpack.config.js
• packages/react-devtools-shared/src/backend/console.js
• packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js
• scripts/flow/react-devtools.js
• scripts/jest/devtools/setupEnv.js

This commit introduces changes to the React compiler that allow for global mutation effects in arguments passed to hooks and in their return values. The modifications primarily focus on the inference system used by the Babel plugin for React, specifically in how it identifies and handles function effects. The changes include the introduction of a new utility function, isEffectSafeOutsideRender, which evaluates whether a function effect is safe to execute outside of the render cycle. This allows the compiler to better handle cases where global variables are mutated within hooks without raising errors, thereby accommodating a broader range of use cases while maintaining the integrity of React's principles regarding side effects.

Additionally, the commit includes new test cases to ensure that the updated behavior is functioning as intended. These tests validate scenarios where global variables are reassigned within functions passed to hooks, ensuring that the compiler correctly identifies and processes these cases. Overall, the changes enhance the flexibility of React's functional programming model while providing developers with clearer guidelines on managing side effects in their components.

Files changed

• compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassign-global-fn-arg.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassign-global-fn-arg.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-hook-arg.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-hook-arg.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-return.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-return.js

This commit introduces support for highlighting and inspecting new Float types, specifically focusing on HostSingletons, Hoistables, and Resources within the React DevTools. Resources are treated as a special case due to their DOM-specific nature, but the implementation expects that any other resource implementation will provide an instance when necessary. The update enhances the ability to select and visualize these components in the DevTools interface, enabling developers to trace the origins of resources more effectively, particularly when there is a single Fiber responsible for creating them.

The changes primarily involve modifications to the functions that identify and return instances of host components and resources. Notably, the commit refines the logic for traversing the fiber tree to ensure that all relevant host instances are captured, including those for HostSingletons and Hoistables. Additionally, the code adjustments improve the handling of resource instances, allowing for better integration with the existing event dispatching mechanism. Overall, this enhancement aims to provide a more comprehensive debugging experience for developers using React DevTools.

Files changed

• packages/react-devtools-shared/src/backend/fiber/renderer.js
• packages/react-devtools-shared/src/backend/types.js
• packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
• packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
• packages/react-devtools-shared/src/backend/views/Highlighter/index.js

This commit introduces a new feature to the compiler by adding Identifier.declarationId and a simulated opaque type called DeclarationId. The DeclarationId serves to uniquely identify a variable in the original source code, irrespective of any reassignments that may occur during compilation. This enhancement allows the compiler to maintain Static Single Assignment (SSA) form throughout the compilation process while still being able to differentiate between SSA versions of identifiers (using IdentifierId) and their original non-SSA versions (using DeclarationId).

The implementation modifies several files, notably adding the declarationId property to the Identifier type and creating functions for generating DeclarationId. The changes ensure that while SSA identifiers can change with reassignment, the declarationId remains constant, thereby preserving the original variable's identity in the source code. This update is crucial for improving the compiler's ability to handle variable tracking and management efficiently.

Files changed

• compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
• compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
• compiler/packages/babel-plugin-react-compiler/src/Inference/InlineImmediatelyInvokedFunctionExpressions.ts
• compiler/packages/babel-plugin-react-compiler/src/SSA/EnterSSA.ts

This commit introduces a new workflow for publishing compiler packages that aligns with the release schedule of React packages. It includes the addition of two GitHub Actions: one for nightly builds and another for manual releases. The nightly workflow is triggered on a set schedule, while the manual workflow allows for publishing from the main branch, with potential future enhancements to support specific commit builds. Both workflows publish to an "experimental" release channel and utilize a shared script for the actual publishing process.

Additionally, the commit establishes a new configuration file for npm authentication and updates existing workflows to facilitate the new publishing strategy. The changes ensure that the compiler packages are consistently published alongside React releases, streamlining the development and deployment process within the project. Overall, this commit enhances the automation and management of the compiler's release cycle.

Files changed

• .github/workflows/compiler_prereleases.yml
• .github/workflows/compiler_prereleases_manual.yml
• .github/workflows/compiler_prereleases_nightly.yml
• compiler/scripts/release/ci-npmrc

This commit addresses an issue with the caching mechanism in the shared linting workflow of the repository. Specifically, it modifies the cache key used in the GitHub Actions workflow for the Prettier job and subsequent jobs. The first Prettier job now uses a cache key that hashes the yarn.lock file, while the following jobs utilize a key that hashes all yarn.lock files within the project. This change aims to ensure that jobs can successfully hit the cache, resolving problems where certain jobs were not able to access cached dependencies due to mismatched hash values.

The author tested the changes locally using the act tool, which allows for running GitHub Actions workflows locally. The modifications were made in the .github/workflows/shared_lint.yml file, with specific updates to the cache key definitions across multiple jobs to enhance the workflow's efficiency and reliability.

Files changed

• .github/workflows/shared_lint.yml

This commit updates the GitHub Actions workflow for the React repository by modifying the compiler_prereleases.yml file to include the actual publishing of packages to npm. The changes involve adding a new step that copies the npm configuration file and runs a script that publishes the packages, ensuring that they are tagged appropriately for distribution.

Overall, the commit streamlines the release process by automating the publishing step, which enhances the efficiency of managing package releases in the React project. This change is part of an ongoing effort to improve the continuous integration and deployment practices within the repository.

Files changed

• .github/workflows/compiler_prereleases.yml

This commit addresses an issue in the tagging process for compiler releases in the React repository. The changes involve modifying the publish.js script to correct the way tags are specified and pushed when publishing packages to npm. Previously, the script expected tags to be provided as an array, which was causing incorrect behavior; the new implementation allows tags to be provided as a comma-separated string, enhancing flexibility and ensuring that the correct tags are pushed during the release process.

Additionally, the commit refines the logic for handling tags in the publishing workflow. The script now correctly splits the string of tags and processes each one individually, while maintaining error handling and providing informative feedback on the success of each operation. This update ultimately improves the reliability of the release process by ensuring that the intended tags are accurately published alongside the packages.

Files changed

• compiler/scripts/release/publish.js

The commit introduces a new compiler pass called lowerContextAccess, which is designed for internal profiling purposes and is not intended for production release. This pass works in conjunction with a previous pull request and aims to optimize context access by synthesizing selector functions from immediately destructured context accesses. The pass effectively lowers context access by modifying the generated code to utilize these selector functions, enhancing performance by reducing unnecessary context retrieval.

The implementation includes modifications to the compiler's pipeline to enable this new pass, as well as the addition of several test cases to validate its functionality. The tests cover various scenarios involving context access, including destructuring and property loads, ensuring that the pass correctly synthesizes and applies selector functions in different contexts. Overall, this commit enhances the React compiler's ability to optimize context usage, potentially leading to improved performance in applications using React's context API.

Files changed

• compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
• compiler/packages/babel-plugin-react-compiler/src/Optimization/LowerContextAccess.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-acess-multiple.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-acess-multiple.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-selector-simple.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-selector-simple.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.js
• compiler/packages/snap/src/SproutTodoFilter.ts

The commit introduces a modification in the React compiler that allows for an experimental feature related to the useContext hook. Specifically, it changes the environment configuration from enableLowerContextAccess to lowerContextAccess, enabling the compiler to rewrite calls to useContext to a specified value. This allows developers to use a selector function as the callee, which enhances the flexibility of context access in React applications. The implementation involves changes across several files, including adjustments to the handling of function calls and the environment configuration schema.

Additionally, the commit includes updates to the test fixtures to reflect the new configuration option. By allowing the specification of a custom callee, the commit aims to facilitate internal experimentation with context access, potentially leading to performance improvements or new patterns in React development. The changes also ensure that the new functionality is well-integrated into the existing compiler infrastructure, allowing for better context management in applications using the React library.

Files changed

• compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
• 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/Optimization/LowerContextAccess.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-acess-multiple.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-acess-multiple.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-selector-simple.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-selector-simple.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.js
• compiler/packages/snap/src/compiler.ts

The commit addresses a bug related to the useRef hook in the React compiler, specifically within the ValidatePreserveMemo functionality. This issue arose when the memoization behavior of components was not correctly preserving references, leading to unexpected results in component rendering and behavior.

The changes made in this commit ensure that the useRef hook is properly validated within the context of memoization, thereby enhancing the reliability of component state management. This fix is part of ongoing efforts to improve React's performance and consistency, particularly in how it handles references and memoized components.

Files changed

This commit marks the initial phase of a refactor for the DevTools Fiber backend, introducing a new method for building a filtered shadow tree by listening to each commit from Fiber and traversing the tree accordingly. Instead of relying on Fibers as the source of truth, the new approach sends diffs based on the constructed shadow tree and performs operations against it. This change enhances the algorithm's resilience to variations in Fiber implementations, particularly in scenarios where stateless clones are used instead of pairs of Fibers, as well as with Server Components that lack their own instances.

The refactor aligns closely with React's reconciliation process in ReactChildFiber, but includes mutable updates to the tree during traversal. Initially, the implementation retains a mapping of fiber instances to facilitate easier reordering, with plans for further simplification in future updates. The primary goal of this commit is to ensure the accurate production of shadow trees, supported by robust test coverage, setting the stage for subsequent improvements to the logic.

Files changed

• packages/react-devtools-shared/src/backend/fiber/renderer.js