react changelog

Here's a rundown of the latest updates and improvements. Get ready to dive into some exciting new features and essential fixes! 🚀

New Features:

  • View Transition Refs (#32038): We've introduced ViewTransitionRef objects, giving developers more control over animations. These refs allow you to programmatically manage animations for view transitions, offering an alternative to CSS-based animations. While it doesn't yet support SSR, this feature is a big step toward more dynamic transitions. 🎥

  • View Transition Events (#32041): Say hello to five new events for <ViewTransition>. These events (onEnter, onExit, onLayout, onShare, onUpdate) provide hooks for specific moments in the transition lifecycle, allowing for more precise animation control. Each event receives a ViewTransitionInstance, so you can animate without needing a ref. 🎉

  • View Transition Class Names (#32050): Now you can apply specific class names based on the transition event kind. This update adds five props (enter, exit, layout, share, update) to <ViewTransition>, making it easier to tailor animations to your needs. Plus, the "none" value lets you opt-out of certain transitions for finer control. 🎨

  • ESLint Plugin React Hooks Enhancement (#30774): We've added support for flat configuration in eslint-plugin-react-hooks, making it easier to integrate with ESLint 9.0.0 and above. This update simplifies configuration and maintains compatibility with older ESLint versions. 🔧

  • Automatic PR Labeling (#32100): Introducing a MAINTAINERS file to document core team members and automatically label PRs from them, improving workflow and transparency. 🏷️

Improvements:

  • Restore useMemoCache (#32067): We've enhanced caching capabilities by restoring useMemoCache in renderers that support Client APIs, boosting performance and efficiency. 🛠️

  • Reduce Nullable Hooks Risk (#32068): Enhancements to the Dispatcher ensure certain hooks are non-nullable, reducing potential runtime errors and improving type safety. 🔒

  • Console Forks Removal Flag (#32058): A new feature flag allows for the removal of console-related warnings and errors, enhancing the developer experience by reducing noise during development. 📉

Bug Fixes:

  • DevTools Profiling Sessions (#32066): Fixed an issue causing DevTools to freeze during consecutive profiling sessions by clearing existing profiling data before starting a new session. No more infinite loops! 🔄

  • Compiler Edge Case (#32055): Resolved an edge case in the React compiler related to object methods, ensuring smoother compilation with compilationMode: infer. 🛠️

  • DevTools useResourceEffect Support (#32088): Added missing support for the useResourceEffect hook in React DevTools, preventing errors and improving stability. 📈

Chores:

  • Remove batchedUpdate Usage (#32074): Refactored DevTools to eliminate the now no-op batchedUpdates function, streamlining code for concurrent mode. 🧹

Stay tuned for more updates, and enjoy these new capabilities and improvements! 🌟

Included Commits

2025-01-10T16:51:37 See commit

This commit introduces a new feature to handle View Transitions through the addition of ViewTransitionRef objects, which provide imperative control over animations associated with view transitions. Each ViewTransitionRef contains properties such as name, group, imagePair, old, and new, all of which are instances of the Animatable type. This allows developers to programmatically trigger animations on these pseudo-elements, rather than relying solely on CSS. Notably, if the name of a transition changes, a new reference is generated, enabling continued interaction with the old reference during exit animations.

However, this API has limitations, particularly regarding server-side rendering (SSR), as it defaults to CSS animations in that context. The current implementation is designed to control a single DOM node, with plans for future enhancements to potentially support multiple nodes, albeit with caution to avoid complicating the API. The commit also addresses timing concerns by suggesting the use of layout effects and requestAnimationFrame (rAF) for precise control over animation timing, with intentions to introduce an event for better synchronization in future updates.

Files changed

  • .eslintrc.js
  • fixtures/view-transition/src/components/Page.js
  • packages/react-art/src/ReactFiberConfigART.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-native-renderer/src/ReactFiberConfigNative.js
  • packages/react-noop-renderer/src/createReactNoop.js
  • packages/react-reconciler/src/ReactFiber.js
  • packages/react-reconciler/src/ReactFiberBeginWork.js
  • packages/react-reconciler/src/ReactFiberCommitEffects.js
  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberCompleteWork.js
  • packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js
  • packages/react-reconciler/src/ReactFiberViewTransitionComponent.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
  • packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
  • packages/react-test-renderer/src/ReactFiberConfigTestHost.js
2025-01-12T18:16:54 See commit

The commit introduces five new events for the <ViewTransition> component in React, enhancing its animation capabilities during view transitions. The events include onEnter, onExit, onLayout, onShare, and onUpdate, each triggered at specific moments in the lifecycle of a view transition. For instance, onEnter is called when a <ViewTransition> is mounted, while onExit is triggered upon unmounting. The onLayout, onShare, and onUpdate events handle layout changes, shared transitions between components, and content updates, respectively. Each event receives a ViewTransitionInstance, allowing developers to animate transitions without needing a reference.

The implementation ensures that only one event is fired per transition, and it emphasizes the order of event execution, with onExit occurring for parents first, mirroring the effect mount/unmount process. The commit modifies several files to integrate these events into the React reconciler and the view transition component, establishing a queue for event handling during the commit phase. This setup allows for a smooth animation experience, as events are processed after layout effects but before passive effects, ensuring that the animations are ready to execute at the appropriate time.

Files changed

  • fixtures/view-transition/src/components/Page.js
  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberViewTransitionComponent.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
2025-01-13T14:45:53 See commit

The commit introduces five new properties to the <ViewTransition> component in React, which allow for specific class names to be applied based on different event kinds during view transitions. These properties—enter, exit, layout, share, and update—enable more granular control over animations triggered by changes in the component's lifecycle. For example, the enter class is applied when the component is mounted, while the exit class is used when it is unmounted. The layout class handles cases where the component's size or position changes without content updates, and the share class is for scenarios where one instance of <ViewTransition> is being mounted while another is being unmounted.

Additionally, the commit introduces a special value, "none", which deactivates the view transition name under specific conditions, allowing developers to limit transitions to only affect particular DOM nodes. This feature is particularly useful for optimizing animations and ensuring that transitions are applied only when necessary, rather than on every child update. The changes are reflected in various files, including modifications to the React reconciler and related components, enhancing the overall functionality and flexibility of view transitions in React applications.

Files changed

  • fixtures/view-transition/src/components/Page.js
  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberViewTransitionComponent.js
2025-01-13T17:18:59 See commit

This commit addresses an edge case in the React compiler's handling of object methods when using the compilationMode: infer feature. Specifically, it modifies the behavior of the compiler to skip traversing nested functions and their return statements within object methods. This change is implemented in the Program.ts file, where a new rule is added to ensure that object methods do not inadvertently cause compilation issues by returning nested arrow functions.

Additionally, the commit introduces new test fixtures to validate the fix. These tests demonstrate how the testFn method within an object can return a function without breaking the compilation process when the @compilationMode(infer) directive is used. The added test cases ensure that the compiler correctly interprets the context and handles the return values appropriately, thus enhancing the robustness of the compilation process in React applications.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.jsx
2025-01-14T20:23:42 See commit

This commit addresses a critical issue in the React DevTools where initiating consecutive profiling sessions would lead to a freeze, caused by an infinite loop of state updates. The problem arises when the startProfiling function invokes selectCommitIndex(0), which, due to existing profiling data, triggers a re-render. Subsequently, the ProfilerContextProvider calls selectCommitIndex(null) to clear the view during profiling, leading to another re-render and causing the infinite loop. To resolve this, the commit introduces a mechanism to clear the existing profiling data before starting a new profiling session, thereby preventing the freeze.

The developer tested the solution by running the DevTools locally and confirmed that the freeze issue was resolved after implementing the fix. The changes involved modifying the ProfilerStore class to include a call to the clear() method at the beginning of the startProfiling function, ensuring that previous profiling data is cleared before starting a new session. The commit effectively closes issues #31977 and #31679, improving the stability of the profiling feature in React DevTools.

Files changed

  • packages/react-devtools-shared/src/devtools/ProfilerStore.js
2025-01-14T21:59:52 See commit

The commit titled "Restore useMemoCache in renderers with support for Client APIs" involves modifications to the React codebase, specifically within the ReactInternalTypes.js and ReactFizzHooks.js files. The primary change is the restoration of the useMemoCache method, which is now defined as a required function that takes a size parameter and returns an array. This adjustment ensures that the useMemoCache function is consistently available in renderers that support Client APIs.

Additionally, the commit updates the HooksDispatcher to include the useMemoCache function when client APIs are supported. This integration allows for better caching capabilities within React's rendering process, enhancing performance and efficiency in managing memoized values. Overall, the changes reflect a commitment to improving the React framework's functionality and support for client-side operations.

Files changed

  • packages/react-reconciler/src/ReactInternalTypes.js
  • packages/react-server/src/ReactFizzHooks.js
2025-01-14T23:40:54 See commit

The commit titled "Reduce risk of leaving shipped Hooks as nullable on Dispatcher" focuses on enhancing the type safety of the Dispatcher in the React reconciler by making certain hook properties non-nullable. Specifically, it modifies the definitions of useCacheRefresh to ensure that it is always present, while other hooks like useEffectEvent and useResourceEffect are marked with comments indicating a future intention to make them non-nullable once specific flags are enabled throughout the codebase.

Additionally, the changes reflect a commitment to improving the reliability of the Dispatcher by reducing the potential for null values in shipped hooks. This adjustment not only streamlines the code but also aims to prevent potential runtime errors associated with nullable hooks, thereby enhancing the overall robustness of the React framework.

Files changed

  • packages/react-reconciler/src/ReactInternalTypes.js
  • packages/react-server/src/ReactFizzHooks.js
2025-01-15T14:19:21 See commit

This commit introduces a feature flag, enableRemoveConsolePatches, to facilitate the removal of console-related warnings and errors in the development environment. The changes primarily involve modifications to several files in the React codebase, where the console warning and error functions are adjusted to respect the new flag. If the flag is enabled, the functions will directly call the console methods without suppressing warnings, while in development mode, they will suppress warnings based on the suppressWarning variable.

Additionally, the flag is integrated across various React feature flag files, ensuring that it can be toggled in different environments, including testing and production. This allows for more granular control over console output, potentially improving the developer experience by reducing unnecessary warnings during development when the flag is enabled. Overall, this commit aims to streamline console behavior and enhance the configurability of the React framework.

Files changed

  • packages/shared/ReactFeatureFlags.js
  • packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.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-dynamic.js
  • packages/shared/forks/ReactFeatureFlags.www.js
  • packages/shared/forks/consoleWithStackDev.www.js
2025-01-15T14:32:33 See commit

The commit titled "chore[DevTools]: don't use batchedUpdate" indicates a refactor in the React DevTools codebase to eliminate the use of the batchedUpdates function from react-dom. This change is motivated by the fact that batchedUpdates is now a no-op in concurrent mode, as the React DevTools relies on an experimental version of React. The modifications primarily involve removing instances where batchedUpdates was previously used to group state updates, allowing for direct state updates instead.

The changes were made across several files within the react-devtools-shared package, including components related to Native Style Editor and Profiler Context. In these files, multiple instances of state updates wrapped in batchedUpdates were simplified to direct calls to state-setting functions. This streamlining aims to improve code clarity and maintainability while ensuring that the functionality remains intact in the context of the current React version being used by the DevTools.

Files changed

  • packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
  • packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
  • packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
  • packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
2025-01-16T15:42:53 See commit

This commit addresses an issue in the React DevTools related to the useResourceEffect hook, which was previously unsupported. As developers began experimenting with this hook, errors surfaced indicating that the method was missing from the Dispatcher used by React DevTools. To resolve this, the commit adds the useResourceEffect function to the Dispatcher, which allows the DevTools to recognize and handle this hook appropriately, thus preventing the errors from occurring.

Although the author could not provide a testing example due to the experimental nature of the React builds lacking the hook, they manually tested the implementation by enabling the enableUseResourceEffectHook flag and rebuilding the necessary artifacts. The changes made include the addition of 23 lines of code in the ReactDebugHooks.js file, specifically to implement the useResourceEffect function and update the Dispatcher accordingly.

Files changed

  • packages/react-debug-tools/src/ReactDebugHooks.js
2025-01-16T19:16:21 See commit

This commit introduces a new MAINTAINERS file that lists the GitHub usernames of the core team members for a project. The primary purpose of this file is to serve as documentation for the members of the core team, providing clarity on who is involved in maintaining the project. Additionally, the file is utilized to automatically label pull requests (PRs) submitted by these core team members, streamlining the review process.

The MAINTAINERS file contains 23 entries, each representing a core team member, and has been added without any deletions or modifications to existing files. This enhancement not only improves transparency regarding team membership but also enhances the workflow for managing contributions from core team members.

Files changed

  • MAINTAINERS
2025-01-16T23:39:11 See commit

This commit introduces support for flat configuration in the eslint-plugin-react-hooks package, aligning it with ESLint version 9.0.0 and above. The README has been updated to include guidance on using both legacy configurations for older ESLint versions and the new flat configuration format. Users can now easily integrate the recommended settings into their ESLint setup, either by using the legacy .eslintrc format or the newer eslint.config.js format, which allows for a more streamlined configuration process.

Additionally, the internal structure of the plugin has been modified to define both legacy and flat recommended configurations explicitly. The legacy configuration continues to be supported for backward compatibility, while the new flat recommended configuration is designed for modern usage. This update enhances usability for developers by providing clear instructions and maintaining compatibility across different ESLint versions.

Files changed

  • packages/eslint-plugin-react-hooks/README.md
  • packages/eslint-plugin-react-hooks/src/index.js