react changelog

Here's the latest scoop on our React updates, packed with new features, improvements, and bug fixes. We've been hard at work to make your development experience smoother and more efficient. Let's dive into what's new and improved! 🚀

  • New Feature: Heuristic I/O Description Extraction
    We've added a nifty heuristic to help you distinguish between different invocations of common helper libraries like fetch. This feature extracts meaningful descriptions from Promise values, allowing you to understand the context of each Promise without excessive clicking. Short names based on filenames or hostnames and detailed tooltips are here to make your debugging life easier!

  • New Feature: Separate Priority Queue for Debug Info
    All debug info now gets its special spot in a separate priority queue. This change is part of our ongoing effort to improve performance by preventing debug info from blocking other elements' resolution. It's a stepping stone towards a future where debug info might even have its own channel!

  • Improvement: Performance Entries Only When Profiling
    To keep your Timings track clean and your dev mode speedy, performance entries will now only be emitted during profiling in React DevTools. This update streamlines performance tracking, ensuring you only get the data you need when you need it.

  • Bugfix: Resolve Deep Cycles
    We've tackled the potential issue of unresolved cycles in React Flight's cycle resolution. This fix involves transforming internal dependencies into introspectable objects, allowing us to detect and skip cyclic references, enhancing the system's resilience against server changes.

  • New Feature: ScrollTimeline Polyfill for Swipe Recognizer
    Say hello to a new polyfill for ScrollTimeline using a CustomTimeline protocol. This enhancement offers more flexibility in controlling view transitions, paving the way for more sophisticated animation capabilities in your React apps.

  • Improvement: React DevTools Update
    React DevTools has been bumped from version 6.1.2 to 6.1.3, bringing a host of enhancements like performance entry optimization, better component tree readability, and refined CSS support for shadow DOM scenarios. This update is all about making your dev tools more efficient and user-friendly.

  • New Feature: Highlight Components with Deeply Equal Props
    We've introduced a feature to highlight components receiving deeply equal props in the performance track. This addition helps you spot potential performance bottlenecks, encouraging the use of memoization techniques to keep your app running smoothly.

  • Bugfix: Disable ScrollTimeline in Safari
    ScrollTimeline in Safari? Not quite there yet! We've disabled it in favor of a polyfill using touch events on iOS, ensuring a smoother and more responsive swipe experience across all platforms.

  • Bugfix: Switch Back to performance.measure
    We've reverted our logging method for trigger logs to performance.measure due to a bug in console.timeStamp. This fix ensures that your event logs appear in the correct sequence, enhancing the clarity of your performance tracking.

That's all for now! Keep building, keep innovating, and enjoy these updates designed to make your React development journey even more awesome. 🌟

Included Commits

2025-07-02T20:07:46 See commit

This commit introduces a polyfill for ScrollTimeline to enhance the Swipe Recognizer functionality in the React framework by implementing a new CustomTimeline protocol. This protocol allows developers to pass a custom animation timeline to the startGestureTransition method, providing an alternative to the native AnimationTimeline. The polyfill enables developers to control view transitions more flexibly, allowing custom implementations to drive animation updates, such as those based on momentum scrolling. The CustomTimeline interface includes properties for currentTime and an animate method, which can either execute the animation or return a cleanup function.

In addition to the polyfill, the commit makes several modifications across various files, including updates to the ESLint configuration, adjustments to the server and client code for better module handling, and the incorporation of the new animation-timelines package. The changes also involve refactoring existing imports to ensure compatibility with the new structure. Overall, this update aims to improve the responsiveness and flexibility of gesture transitions in React applications, while also laying the groundwork for more sophisticated animation capabilities in the future.

Files changed

  • .eslintrc.js
  • fixtures/view-transition/loader/server.js
  • fixtures/view-transition/package.json
  • fixtures/view-transition/server/index.js
  • fixtures/view-transition/server/render.js
  • fixtures/view-transition/src/components/App.js
  • fixtures/view-transition/src/components/Page.js
  • fixtures/view-transition/src/components/SwipeRecognizer.js
  • fixtures/view-transition/src/index.js
  • fixtures/view-transition/yarn.lock
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
2025-07-02T20:10:52 See commit

This commit reverts the logging method for trigger logs in the Fiber architecture back to using performance.measure from console.timeStamp. The change was necessitated by a bug in console.timeStamp, which caused logs with equal start and end times to stack in call order rather than reverse call order. This behavior was detrimental to the logging of specific events such as Mount, Unmount, Reconnect, and Disconnect, as it resulted in logs appearing in the wrong sequence. The commit also addresses an issue where clamped update times could produce zero-width entries, leading to a two-row scheduler lane instead of the intended single row.

In addition to reverting the logging method, the commit includes modifications to ensure that the logging functions correctly reflect the timing of events. It refines the conditions under which various timing logs are generated, ensuring that the end times are accurately captured and that the logs maintain their intended order. Overall, these changes aim to enhance the accuracy and clarity of performance tracking within the React Fiber reconciliation process.

Files changed

  • packages/react-reconciler/src/ReactFiberPerformanceTrack.js
2025-07-02T20:12:37 See commit

This commit introduces a heuristic to enhance the extraction of meaningful descriptions from Promise values in a React application, specifically focusing on I/O operations. The goal is to facilitate the identification of different calls to common helper libraries, such as fetch, without the need for extensive navigation through each instance. The heuristic identifies and returns descriptions based on common properties, such as url, id, or name, allowing developers to quickly understand the context of each Promise.

The implementation includes functions that generate both short and long names for I/O operations, incorporating relevant details into tooltips for better debugging and performance tracking. For instance, the short name may include a filename or hostname for URLs, while the long name provides a more comprehensive description. The changes involve significant modifications to the ReactFlightPerformanceTrack.js file, adding 160 lines of code and enhancing the logging of I/O operations to improve the developer experience in monitoring and diagnosing asynchronous tasks.

Files changed

  • packages/react-client/src/ReactFlightPerformanceTrack.js
2025-07-02T21:01:49 See commit

This commit disables the use of ScrollTimeline in Safari when implementing the recommended SwipeRecognizer approach, opting instead for a polyfill that utilizes touch events on iOS devices. The decision stems from the fact that the upcoming ScrollTimeline feature in Safari does not function as expected—it runs at a fixed 60fps and is out of sync with scrolling, which undermines its primary purpose. In contrast, the polyfill allows for smoother touch responses at 60fps while gesturing and can run CSS animations at 120fps upon release, providing a superior user experience. Additionally, known bugs in Safari further complicate the use of ScrollTimeline, particularly when interacting with view transitions, rendering it less effective for swipe gestures.

The changes involve modifications to the SwipeRecognizer component, where user agent detection is implemented to identify Safari on mobile devices. The code now includes logic to manage touch events and utilizes the TouchPanTimeline for gesture recognition when in Safari, while still allowing for the original ScrollTimeline functionality in other browsers. This approach ensures that the component remains functional and responsive across different platforms, ultimately leading to a more reliable implementation of swipe gestures.

Files changed

  • fixtures/view-transition/src/components/SwipeRecognizer.js
2025-07-02T21:33:07 See commit

This commit introduces a new feature in the React Fiber reconciliation process that highlights components receiving deeply equal props, indicating potential performance issues. When a component is detected to have unchanged, deeply equal objects as props, it is flagged for further inspection. The implementation is designed to be conservative, ensuring that warnings are only logged under specific conditions, such as when the component is the first in a subtree to trigger the deep equality detection, and if it has not scheduled updates that would naturally cause a rerender.

The changes include modifications to the performance tracking system, where new functions were added to manage deep equality checks. The commit also updates the logging mechanism to provide clearer warnings in the development environment, suggesting that developers consider using memoization techniques or the React Compiler to improve performance. Overall, this enhancement aims to help developers identify and address potential inefficiencies in their component rendering processes.

Files changed

  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberPerformanceTrack.js
  • packages/shared/ReactPerformanceTrackProperties.js
2025-06-27T13:45:11 See commit

This commit introduces a new feature that writes all debug information to a separate priority queue within the React Flight framework. The intention is to eventually direct this information to a different channel, but for now, it is positioned ahead in the queue to prevent blocking the resolution of other elements. The decision to prioritize debug info is based on the need to maintain performance and avoid issues that could arise from relying on order consistency when two separate channels are implemented.

The changes affect multiple files, including modifications to the ReactFlightClient.js, ReactFlightDOMEdge-test.js, and ReactFlightServer.js, indicating a broad impact on both client and server components of the React ecosystem. The commit highlights the ongoing evolution of the system, with considerations for potential future implementations that could affect how data is processed and rendered, particularly in relation to lazy loading and element outlining.

Files changed

  • packages/react-client/src/ReactFlightClient.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
  • packages/react-server/src/ReactFlightServer.js
2025-06-27T14:32:08 See commit

This commit focuses on optimizing the performance tracking in the React DevTools by modifying how performance entries are emitted during profiling sessions. Previously, the performance entries were being generated excessively, which not only cluttered the Timings track in development mode but also negatively impacted overall performance. The changes ensure that performance entries are only buffered when profiling is active, thereby reducing unnecessary overhead during regular development.

The modifications involve significant code cleanup, with 119 lines added and 147 removed, reflecting a more streamlined approach to performance tracking. The commit primarily updates the conditions under which performance marks are recorded, removing redundant checks for user timing support and consolidating the logic to ensure performance data is only captured when profiling is enabled. This change is expected to enhance the developer experience by providing clearer performance insights without the performance cost associated with excessive data logging.

Files changed

  • packages/react-devtools-shared/src/backend/profilingHooks.js
2025-06-27T15:17:08 See commit

The commit updates React DevTools from version 6.1.2 to 6.1.3, introducing several enhancements and bug fixes. Key changes include the emission of performance entries exclusively during profiling, which optimizes performance tracking. Additionally, the commit improves the handling of Server Component function locations for parent stacks, adds a minimum indent size to the Component Tree for better readability, and refines the CSS for settings to support CSS variables in shadow DOM scenarios.

Other notable updates involve the removal of the feature flag for renderable context, the addition of a tool for printing the component tree of the currently open React app, and the cleanup of the enableSiblingPrerendering flag. The update also includes a switch back to the flow parser for prettier and an upgrade of the json5 library. Overall, this release enhances the functionality and usability of React DevTools, making it more efficient for developers.

Files changed

  • packages/react-devtools-core/package.json
  • packages/react-devtools-extensions/chrome/manifest.json
  • packages/react-devtools-extensions/edge/manifest.json
  • packages/react-devtools-extensions/firefox/manifest.json
  • packages/react-devtools-inline/package.json
  • packages/react-devtools-timeline/package.json
  • packages/react-devtools/CHANGELOG.md
  • packages/react-devtools/package.json
2025-06-29T14:47:33 See commit

This commit addresses issues related to deduplication of references in the React Flight framework, specifically when handling model roots. The changes involve modifications to the ReactFlightDOMBrowser tests and the ReactFlightServer implementation. The new tests ensure that references within promises are properly deduplicated, enabling the framework to recognize and utilize existing references instead of creating new ones. This is particularly important for maintaining consistency and preventing unnecessary duplication of objects in the rendered output.

In the implementation, the code checks if a reference already exists and, if the current model root matches an existing reference, it will reuse that reference instead of creating a new one. This enhancement improves the efficiency of the rendering process and ensures that circular references are handled correctly, as demonstrated in the added test cases. Overall, the commit strengthens the robustness of the React Flight framework by ensuring that object references are managed more effectively during server-side rendering.

Files changed

  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
  • packages/react-server/src/ReactFlightServer.js
2025-06-29T14:56:16 See commit

The commit titled "Resolve Deep Cycles" addresses a potential issue in the cycle resolution mechanism of the React framework, particularly in the context of flight references. The problem arises when a future reference to a cycle is eagerly parsed before the target is fully loaded, leading to unresolved cycles. While the author could not identify a typical scenario that would trigger this issue, it was reproducible under certain conditions, such as when dealing with debug information, which is evaluated eagerly. The solution implemented involves converting the internal dependencies in the "listener" list into introspectable objects rather than closures. This change allows for better traversal of blocked references to detect cycles, ultimately preventing unresolved references.

The author expresses some hesitation about the complexity and CPU overhead introduced by this fix, questioning whether it is necessary given that the issue primarily affects debug data. Nevertheless, the commit aims to enhance the resilience of the system against potential server changes. The changes made in this commit affect the ReactFlightClient.js and a test file in the ReactFlightDOMBrowser package, and the commit closes issue #32316 while also addressing a related issue in the Next.js repository.

Files changed

  • packages/react-client/src/ReactFlightClient.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js