react changelog

Welcome to the latest updates in our codebase! We've been busy squashing bugs, adding some cool new features, and making improvements that are sure to enhance your experience. Here's a rundown of what's been happening:

Bugfix 🐛

  • Fix Overlapping "message" Bug in Performance Track (#31528): We've tackled a pesky issue where overlapping events were causing chaos in React's performance tracking. Now, the end time of the last render is stored to prevent any mishaps, ensuring smoother performance tracking.
  • [compiler] Repro for reactive ref.current accesses (#31519): A bug in handling ref.current dependencies has been fixed. We've added a test fixture to make sure those reactive dependencies are tracked accurately, so your components behave just as they should.
  • [compiler] Repro for mutable range edge case (#31479): An edge case involving mutable ranges and aliasing in function expressions has been addressed. Test fixtures now ensure our compiler handles these scenarios like a pro.

New Features ✨

  • Export __COMPILER_RUNTIME in stable (#31540): The compiler is now part of stable releases like React 19 RC, making it more accessible for developers who want to harness its power.
  • Turn on enableSiblingPrerendering in canary (#31541): We've flipped the switch on the enableSiblingPrerendering feature flag, paving the way for exciting new capabilities in the upcoming release candidate.
  • [Flight] Add initial readme to react-server package (#31464): A shiny new README for the react-server package is here! It covers the prerender API for Flight, giving you a head start on implementing React Server Components.

Improvements 🌟

  • Only log component level profiling for components that actually performed work (#31522): We've streamlined component-level profiling by focusing on components that truly impact performance, reducing noise and making logs more actionable.
  • Make prerendering always non-blocking with fix (#31452): Prerendering is now non-blocking, eliminating issues with infinite render loops and enhancing stability.
  • Format event with "warning" yellow and prefix with "Event: " (#31536): Event logging just got a makeover with a "warning" yellow color and a consistent naming format, making it easier to track events in the rendering process.

Chore 🧹

  • (chore): copy fix in precedence error (#31524): We've corrected a typo in an error message related to <style> tag usage, ensuring clarity in error reporting.

That's all for now! We hope these updates make your development journey smoother and more enjoyable. Keep coding and stay awesome! 🚀

Included Commits

2024-11-08T17:38:41 See commit

This commit addresses an issue with prerendering in React, ensuring that it operates in a non-blocking manner. The problem previously arose from internal applications encountering infinite render loops due to updates from external store states during the rendering process. The root cause was identified as the renderWasConcurrent variable being relocated within the do block, which caused synchronous renders triggered by external store checks to get stuck with a RootSuspended exit status. This issue is not limited to sibling prerendering but is a broader concern regarding updates to synchronous external stores during rendering.

The changes made in this commit have been tested against local reproductions, resulting in successful renders without crashes. The team plans to add a unit test to cover this specific scenario to prevent future occurrences. The commit includes modifications to several test files and core React files, reflecting the adjustments made to enhance the rendering process. Co-authored by Andrew Clark and Rick Hanlon, this commit aims to improve stability and performance in React's rendering engine.

Files changed

  • packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
  • packages/react-reconciler/src/ReactFiberLane.js
  • packages/react-reconciler/src/ReactFiberRootScheduler.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
  • packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
  • packages/react-reconciler/src/__tests__/ReactSiblingPrerendering-test.js
  • packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
2024-11-09T00:07:37 See commit

The commit introduces an initial README for the react-server package, which provides foundational documentation for implementing React Server Components, specifically focusing on the prerender API for the Flight renderer. While the README is not exhaustive, it serves as a starting point for developers, detailing the functionalities of the react-server package, which includes two main rendering implementations: Fizz for server-side rendering and Flight for rendering React Server Components that do not execute on the client. The README outlines usage instructions, code examples for rendering and handling client and server references, and discusses the nuances of prerendering versus real-time rendering.

Additionally, the README elaborates on the rendering process, including how to handle errors and manage streams effectively. It highlights the key functions available in the API, such as createRequest, startWork, and abort, providing a comprehensive overview of how to work with the react-server package. Overall, this commit lays the groundwork for further documentation and guidance for developers looking to implement React Server Components using the Flight renderer.

Files changed

  • packages/react-server/README.md
2024-11-11T23:04:29 See commit

This commit addresses a specific edge case in the compiler related to mutable ranges and aliasing in function expressions. It introduces test fixtures that reproduce the bug, demonstrating how mutable ranges are derived from identifiers and their aliases during the compilation process. The issue arises when using the enableTransitivelyFreezeFunctionExpressions flag set to false, particularly in scenarios where functions throw and are retried without clearing the memo cache. The commit includes detailed examples showcasing the discrepancies in evaluator results, where the expected output differs from the actual output due to incorrect handling of mutable ranges.

Additionally, the commit modifies the SproutTodoFilter.ts file to include the newly identified bugs in the skip filter set, ensuring that these edge cases are accounted for in future compilations. The changes consist of adding two new test fixtures, which help validate the behavior of the compiler in these specific scenarios and ensure that the mutable ranges are correctly inferred and handled in the context of co-mutation between variables.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-aliased-capture-aliased-mutate.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-aliased-capture-aliased-mutate.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-aliased-capture-mutate.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-aliased-capture-mutate.js
  • compiler/packages/snap/src/SproutTodoFilter.ts
2024-11-12T19:04:54 See commit

This commit introduces a test fixture to address a bug related to the handling of ref.current dependencies in the React compiler. The issue stems from the incorrect filtering of these dependencies within the propagateScopeDependencies:checkValidDependency function. The commit emphasizes that ref.current values should always be treated as dependencies because they can be reactive, and any pruning of non-reactive dependencies should occur in a separate function, pruneNonReactiveDependencies. The provided test case demonstrates the expected behavior of the component when switching between two refs based on a condition, highlighting the discrepancies in evaluator results when the bug is present.

In addition to the test fixture, the commit modifies the SproutTodoFilter.ts file to include the newly added test case under a set of known issues. This ensures that the bug is tracked and can be addressed in future iterations of the codebase. Overall, the changes aim to improve the accuracy of dependency tracking in React's reactive system, ensuring that components behave correctly when using refs.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-nonreactive-ref.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-nonreactive-ref.tsx
  • compiler/packages/snap/src/SproutTodoFilter.ts
2024-11-13T15:57:15 See commit

This commit focuses on optimizing the logging of component-level profiling in React by only tracking components that actually perform work, as indicated by the PerformedWork flag or the presence of effects. The previous method included parent components to provide contextual information, but this approach generated excessive noise and incurred significant overhead due to the performance.measure() calls, particularly in large applications. By narrowing the scope of logged components, the profiling becomes more actionable and less cluttered, allowing developers to focus on components that genuinely impact performance.

Additionally, the commit introduces a threshold for logging based on the component's effect duration, ensuring that only components with a significant self-time are recorded. While this change reduces the context available in the logs, it emphasizes the need for enhanced tooling, such as a feature in Chrome DevTools that can link to more detailed context provided by React DevTools. Overall, the adjustments aim to streamline performance tracking and improve the developer experience when diagnosing rendering issues.

Files changed

  • packages/react-reconciler/src/ReactFiberCommitWork.js
2024-11-14T16:48:14 See commit

In this commit, the feature flag enableSiblingPrerendering has been enabled across various files in preparation for the next release candidate (RC). While the flag is now set to true, it has not been removed entirely, allowing for potential bug identification before finalizing the feature. The commit reflects a cautious approach to feature rollout, ensuring that the flag remains available for further testing.

Additionally, the dynamic feature flag in the Meta builds has not been removed, indicating that the Meta team will manage this aspect separately. The changes were made across multiple files, including ReactFeatureFlags.native-oss.js, ReactFeatureFlags.test-renderer.js, and others, ensuring consistency in the implementation of the sibling prerendering feature throughout the codebase.

Files changed

  • packages/shared/ReactFeatureFlags.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
2024-11-14T20:46:35 See commit

The commit titled "Export __COMPILER_RUNTIME in stable" addresses the need to make the compiler available in stable releases of React, such as React 19 RC and canary versions. By exporting the __COMPILER_RUNTIME, developers can utilize the compiler functionality in these stable channels.

The modification was made in the packages/react/index.stable.js file, where the __COMPILER_RUNTIME was added to the existing exports. This change enhances the capabilities of the stable version, allowing for better integration and usage of the compiler in various development scenarios.

Files changed

  • packages/react/index.stable.js
2024-11-14T21:35:08 See commit

The commit titled "Fix Overlapping 'message' Bug in Performance Track" addresses a critical issue in React's performance tracking system related to the scheduling of microtasks during rendering. When a microtask is scheduled from a render or effect and a state update is triggered, the event time of this new render can precede the completion of the last render, leading to overlapping events. To resolve this, the commit introduces a mechanism to store the end time of the last render, ensuring that any subsequent updates with earlier event times are appropriately clamped to prevent overlaps. Additionally, it handles special cases where the root does not complete or is suspended, ensuring that these scenarios are properly finalized.

Moreover, the commit enhances the logging of events by preventing duplicate entries when multiple renders occur within the same event. It implements a check to ignore the "message" event when it originates from React's scheduling system, thereby streamlining event tracking. Various files across the React codebase were modified to incorporate these changes, including updates to performance tracking and event resolution functions, ensuring a more robust and accurate handling of event timings in React's rendering lifecycle.

Files changed

  • packages/react-art/src/ReactFiberConfigART.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-native-renderer/src/ReactFiberConfigFabric.js
  • packages/react-native-renderer/src/ReactFiberConfigNative.js
  • packages/react-noop-renderer/src/createReactNoop.js
  • packages/react-reconciler/src/ReactFiberPerformanceTrack.js
  • packages/react-reconciler/src/ReactFiberRootScheduler.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
  • packages/react-reconciler/src/ReactProfilerTimer.js
  • packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
  • packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
  • packages/react-test-renderer/src/ReactFiberConfigTestHost.js
2024-11-14T21:44:29 See commit

This commit introduces a new formatting style for event logging within the React reconciler, specifically by utilizing a "warning" yellow color to indicate the start of new events in the rendering process. This change aims to enhance the clarity of event tracking, making it easier to differentiate between the initiation of events and subsequent rendering phases, which are represented in a secondary purple color. Additionally, a light purple shade is used for spans between renders that occur within the same event context, reflecting their sequential nature. The event names are now prefixed with "Event: " to maintain consistency with JavaScript trace formatting and to address the previously inconsistent lowercase representation.

The modifications include updates to the ReactFiberPerformanceTrack.js file, where the color coding and event naming conventions have been implemented. These changes are expected to improve the overall readability of performance logs and provide a clearer understanding of the rendering flow, particularly in scenarios involving multiple re-renders triggered by a single event. The commit also clarifies the distinction between the event time and the JavaScript event loop processing time, which may appear to start at different points in the flamegraph visualization.

Files changed

  • packages/react-reconciler/src/ReactFiberPerformanceTrack.js
2024-11-14T22:03:59 See commit

This commit addresses a typo in the error message generated when a <style> tag is hoisted without the required precedence and href attributes. The original message contained a misspelling of "conflict," which has been corrected. Additionally, the last part of the error message was deemed unnecessary since the preceding text already advises moving the <style> tag to the document's head manually.

Modifications were made in two files: ReactFiberConfigDOM.js, where the error message was updated, and ReactDOMFloat-test.js, where the test cases were adjusted to reflect the corrected error message. The overall aim of this commit is to enhance the clarity and accuracy of the error reporting related to <style> tag usage in React.

Files changed

  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-dom/src/__tests__/ReactDOMFloat-test.js