react changelog

Hey there, React enthusiasts! We've got some exciting updates and fixes coming your way. Here's a rundown of the latest and greatest changes to keep your development experience smooth and your apps running like a dream. Check it out! 🚀

  • New feature: Added support for the satisfies operator in the babel-plugin-react-compiler. This enhancement boosts TypeScript capabilities, making it easier to handle type annotations and expressions. 🎉

  • New feature: Updated the changelog for version 19.1.0, featuring the shiny new "Owner Stack" for better debugging and error overlays. This is a game-changer for understanding component relationships during development. 🛠️

  • Improvement: Introduced logging for component lifecycle events like mounting, unmounting, reconnecting, and disconnecting. This makes tracking performance across various React lifecycle phases a breeze. 🌟

  • New feature: Say hello to startGestureTransition, a new API replacing useSwipeTransition. It offers a more flexible and unified approach to handling gestures and transitions. Swipe away! 👋

  • New feature: React DevTools now displays native tags for Native Host components. Hover over a badge to see the magic and identify native components with ease. 🔍

  • Bugfix: Fixed an issue during snapshotting when errors occurred due to duplicate names in the "old" state. Now, the system continues through phases to maintain consistency. 🐛

  • Improvement: Enhanced handling of host instances in persistent mode by releasing old instances and acquiring new ones when clones are created. This boosts the reliability and performance of React DevTools. ⚙️

  • Improvement: Adjusted animation ranges in View Transitions based on duration and delay, ensuring smoother synchronization and a better user experience. 🎥

  • Bugfix: Resolved bugs in performance tracking for effects, ensuring accurate logging of component effects even when children are involved. 📈

  • Bugfix: Fixed test filter and watch mode issues by updating the file watcher to monitor the correct directory. Testing just got smoother! 🧪

  • Chore: Tidied up the changelog by ensuring consistent spelling of "Owner Stack" and "Component Stack". Keeping it clean and professional! 📝

That's all for now, folks! Keep coding, keep creating, and stay tuned for more updates. Happy Reacting! 🌈

Included Commits

2025-04-01T00:05:50 See commit

The commit introduces a new API called startGestureTransition, which is designed to replace the previous useSwipeTransition API. This new approach allows developers to perform updates to useOptimistic hooks within the scope of a gesture transition, providing a more flexible and unified handling of gestures and transitions. The implementation allows for a gesture recognizer to have two properties: action, which handles side-effects post-gesture, and gesture, which must remain synchronous and free of side-effects. This design aims to improve the handling of gestures across multiple roots by allowing gestures to be "retained" until all associated actions are canceled.

However, there are some limitations with this new API, such as the inability to define multiple directions simultaneously and the absence of a standard direction protocol, which will require libraries to establish their own conventions. The cancellation mechanism is also restructured to be associated with the scope of startGestureTransition, rather than tied to specific hooks, allowing for a more global approach to managing gesture transitions. Overall, this commit enhances the flexibility and usability of gesture handling in React, albeit with some trade-offs in complexity and standardization.

Files changed

  • fixtures/view-transition/src/components/Page.js
  • fixtures/view-transition/src/components/SwipeRecognizer.js
  • packages/react-reconciler/src/ReactFiberGestureScheduler.js
  • packages/react-reconciler/src/ReactFiberHooks.js
  • packages/react-reconciler/src/ReactFiberRootScheduler.js
  • packages/react-reconciler/src/ReactFiberTransition.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
  • packages/react/index.experimental.development.js
  • packages/react/index.experimental.js
  • packages/react/src/ReactClient.js
  • packages/react/src/ReactSharedInternalsClient.js
  • packages/react/src/ReactStartTransition.js
  • packages/react/src/ReactTransitionType.js
  • scripts/error-codes/codes.json
2025-04-01T15:44:44 See commit

This commit addresses the handling of animations in View Transitions by adjusting the start and end ranges based on the duration and delay of each animation. The key change is to prevent animations with varying durations from stretching to cover the entire swipe range, which would misalign them when played in real-time. Instead, the commit implements a method to calculate the adjusted range start and end, ensuring that animations play in reverse while maintaining their timing relative to the original playback. This adjustment is particularly important when considering long-duration animations that might be excluded from the viewport, as it allows the remaining animations to adapt accordingly.

Additionally, the commit introduces a mechanism to collect the longest duration of any view-transition animation, including delays, to further refine the range adjustments. It also highlights areas for future improvement, such as handling animations with multiple iterations, as the current implementation only plays them once. Overall, these changes enhance the synchronization of animations during view transitions, ensuring a smoother and more cohesive user experience.

Files changed

  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
2025-04-02T14:49:44 See commit

This commit addresses an issue that arises during the snapshotting phase when an error occurs, particularly in cases where there are duplicate names in the "old" state. The error prevents the update callback from being invoked, which means that mutations and other necessary updates have not yet been applied. To resolve this, the commit introduces a mechanism that ensures the transition process continues through the mutation and layout phases after an error, allowing the system to return to a consistent state.

The changes made in the ReactFiberConfigDOM.js file include modifications to the startViewTransition and startGestureTransition functions. The implementation now includes calls to the mutationCallback and layoutCallback to ensure these phases are completed before proceeding. Additionally, it skips certain callbacks that are not necessary in the context of error handling, specifically avoiding the afterMutationCallback and readyCallback when not animating, while still ensuring that the system's state is properly restored through the animateCallback.

Files changed

  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
2025-04-02T21:44:38 See commit

This commit introduces a new feature in the React DevTools specifically for Native applications, which displays the native tag for Native Host components within a badge when a user inspects the component. This enhancement aims to improve the developer experience by providing a unique identifier for the corresponding native component, although it currently only supports display functionality. The implementation of indexable native tags would require significant changes to the bridge operations, which is not feasible at this time.

The changes include the addition of a new NativeTagBadge component that shows the native tag when the user hovers over it. The commit modifies several files to integrate the native tag functionality, including updates to the inspected element's structure to accommodate the new native tag data. The badge is designed to enhance the visual representation of inspected elements without altering existing functionalities, ensuring that developers can easily identify and work with native components in their applications.

Files changed

  • packages/react-devtools-shared/src/backend/fiber/renderer.js
  • packages/react-devtools-shared/src/backend/legacy/renderer.js
  • packages/react-devtools-shared/src/backend/types.js
  • packages/react-devtools-shared/src/backendAPI.js
  • packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.js
  • packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
  • packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.css
  • packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.js
  • packages/react-devtools-shared/src/frontend/types.js
2025-04-03T14:06:04 See commit

This commit addresses the handling of host instances in React DevTools when operating in persistent mode. It introduces logic to ensure that old host instances are released and new ones are acquired when clones are created. Specifically, the code checks if the nextFiber is a HostHoistable and whether its memoizedState has changed compared to the previous fiber instance. If so, it releases the resource associated with the old instance and acquires the new one. Additionally, it includes similar logic for HostComponent, HostText, and HostSingleton types, ensuring that the old stateNode is released and the new one is acquired when a clone occurs.

The modifications involve changes to the renderer.js file, with a total of 20 changes made, including 19 additions and 1 deletion. The new checks and resource management ensure that the React DevTools can effectively manage host instances in scenarios where persistent mode leads to state updates and cloning, improving the overall reliability and performance of the tool.

Files changed

  • packages/react-devtools-shared/src/backend/fiber/renderer.js
2025-04-04T03:33:14 See commit

This commit addresses two significant bugs related to the measurement of performance tracking for effects in the React framework. The first issue involved the incorrect handling of deletion effects when a subtree is deleted, as well as passive disconnects when a subtree is hidden. The second bug arose from a miscalculation of the self time (componentEffectDuration) when logging effects, particularly when child components reset this duration before logging could occur. This led to a majority of effects not being logged, as they typically have children that interfere with the timing calculations.

To resolve these issues, the commit introduces a stack-based approach to manage component effect durations more effectively, ensuring that logging occurs after child components have been processed to accurately capture the end time. The changes include modifications to various functions within the React reconciler, adding new functions for pushing and popping component effect durations. This not only fixes the bugs but also enhances the overall performance tracking capabilities of the system, ensuring that component effects are logged accurately and consistently.

Files changed

  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactProfilerTimer.js
2025-04-04T03:33:29 See commit

This commit introduces logging functionality for component lifecycle events in a React application, specifically focusing on the mounting, unmounting, reconnecting, and disconnecting of components. A distinguishing feature of this update is the addition of a yellow entry above the component subtree in the performance tracking interface, which helps differentiate between mounted and updated subtrees across various phases of the React lifecycle, including render, mutation, layout, and passive effect phases. This approach aims to maintain clarity without overwhelming the user with excessive annotations, as it restricts the markers to one per depth in the component tree.

The commit modifies several files to implement these logging features, including the ReactFiberCommitWork and ReactFiberPerformanceTrack modules. The new logging functions, such as logComponentMount, logComponentUnmount, logComponentReappeared, and logComponentDisappeared, are designed to track the timing of these events, allowing developers to analyze performance more effectively. The changes also ensure that logs are generated under specific conditions, such as when component effects exceed a defined duration, thereby providing valuable insights into component behavior and performance during rendering and updates.

Files changed

  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberPerformanceTrack.js
2025-03-28T15:10:32 See commit

This commit introduces support for the satisfies operator in the babel-plugin-react-compiler, enhancing the TypeScript capabilities of the React compiler. The changes include modifications to the handling of type annotations, specifically by implementing a new case for TSSatisfiesExpression within the lowerExpression function. This addition allows the compiler to correctly interpret and process expressions that use the satisfies operator, distinguishing them from traditional type casts.

Additionally, the commit includes updates to the type definitions and code generation logic to accommodate the new operator, ensuring that it is properly recognized during the compilation process. Several new test cases have also been added to validate the functionality of the satisfies operator, demonstrating its usage in various scenarios. These enhancements collectively improve type safety and developer experience when working with TypeScript in React applications.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-array.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-array.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-number.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-number.ts
2025-03-28T20:03:08 See commit

This commit addresses an issue that arose during the migration of the test runner to utilize the bundled build, as noted in a previous pull request. The problem was that the file watcher was incorrectly set to listen for changes in the current working directory (cwd), which was set to packages/snap. The fix involves changing the file watcher to monitor changes in the packages/babel-plugin-react-compiler directory instead.

The modifications made in the code include a single addition and deletion, along with two changes in the runner-watch.ts file. Specifically, the line that subscribed the watcher to the current working directory has been updated to subscribe to PROJECT_ROOT, ensuring that the test filter and watch mode function correctly by responding to the appropriate file changes.

Files changed

  • compiler/packages/snap/src/runner-watch.ts
2025-03-28T20:21:29 See commit

The commit introduces a comprehensive changelog for version 19.1.0 of React, released on March 28, 2025. Notable additions include the implementation of an Owner Stack, a development-only feature that aids in debugging by providing stack traces of component rendering relationships. Additionally, the update enhances support for Suspense boundaries across various environments, improves hydration scheduling to reduce unnecessary client rendering, and addresses several bugs and inconsistencies in both React and React DOM.

Other significant changes include updates to the useId hook for valid CSS selectors, the introduction of a new experimental API for prerendering React Server Components, and various fixes aimed at improving performance and developer experience. The changelog also highlights improvements in compatibility with tools like Google Closure Compiler, alongside adjustments to server component streaming and error handling. Overall, this update focuses on enhancing the debugging experience, improving performance, and expanding the capabilities of React components.

Files changed

  • CHANGELOG.md
2025-03-28T21:02:11 See commit

This commit updates the changelog for version 19.1.0, which is set to be released on March 28, 2025. The primary addition is the introduction of the "Owner Stack" feature, which provides a string representation of the components responsible for rendering a specific component. This feature aims to enhance debugging by allowing developers to log owner stacks and improve error overlays, thereby clarifying component relationships during development. It is important to note that owner stacks are only available in development builds, while production component stacks remain unchanged.

The changelog also highlights the distinction between Owner Stacks and Component Stacks, with the former focusing on the direct rendering components and the latter showing the hierarchy of components leading to an error. Additionally, it mentions the availability of the captureOwnerStack API, which can be utilized in development mode to capture and log owner stacks, further aiding in debugging efforts.

Files changed

  • CHANGELOG.md
2025-03-28T21:30:13 See commit

This commit focuses on correcting the spelling consistency of "Owner Stack" in the CHANGELOG.md file. The changes include modifications to ensure that "Owner Stack" and "Component Stack" are consistently capitalized throughout the document, enhancing clarity and professionalism in the documentation.

Additionally, the commit includes minor edits to the text, ensuring that references to "Owner Stack" and "Component Stack" align with the intended terminology. These adjustments aim to improve the readability of the changelog while maintaining accurate descriptions of the functionalities related to owner stacks in the context of debugging and development tools.

Files changed

  • CHANGELOG.md