react changelog

Hey there, fellow React enthusiasts! We've been busy bees 🐝 making some exciting updates and improvements to our beloved React ecosystem. Here's a roundup of the latest and greatest changes we've rolled out. Dive in and explore what's new and improved!

  • New Feature: Server Component Support in DevTools
    We've added VirtualInstances to the React DevTools tree, making it easier for you to visualize and manage Server Components. Now, a single Server Component instance can appear as one instance, even if it's a parent to multiple children. This means a cleaner, more efficient tree structure for you to work with. However, keep an eye out for some quirky behavior during updates, especially with list reorders. We're working on making it even smoother!

  • New Feature: Macro Methods in the Compiler
    Say hello to macros as methods! We've expanded the React compiler to support macros invoked as methods, not just function calls or JSX. This means more flexibility in defining macros, like myMacro.*.foo.bar. The compiler now builds a map of partially-satisfied macro patterns, recognizing when a macro pattern is fully satisfied. This enhancement is all about giving you more power and flexibility in your coding adventures.

  • New Feature: Experimental renderToHTML Function
    We've rolled out the experimental_renderToHTML function in the react-markup package. It's perfect for generating HTML markup in contexts like email templates that use Server Components. With a nod to its experimental status, this function is all about pushing the boundaries and seeing what's possible.

  • New Feature: Prerendering in Flight
    Introducing prerendering in the Flight framework, similar to Fizz. Instead of an immediate stream result, you get a promise that resolves to the stream once prerendering is complete. This enhancement improves error handling and streamlines the prerendering process, making Flight even more robust and reliable.

  • New Feature: Increment/Decrement Support in Compiler
    We've added support for increment (++) and decrement (--) operations on member expressions in the React compiler. This means expressions like a.x++ are now handled seamlessly, preserving the semantics of these operations. More power to you when managing member expression updates!

  • Improvement: Promotion of Temporaries in Compiler
    We've improved how the React compiler handles temporaries to prevent unintended code reordering over side-effectful operations. This ensures that your code executes in the intended order, preventing unexpected behaviors and keeping everything running smoothly.

  • Bugfix: Unhandled Rejection in Flight
    We've squashed a bug that caused unhandled promise rejection errors in Flight when aborting a synchronous operation. Now, errors after an abort are properly handled, making the error handling in React's server components more robust.

  • New Feature: useTransition Support in Compiler
    The useTransition hook is now supported in the Forget compiler, marking the startTransition function as stable. This enhancement is all about managing concurrent state updates more effectively, giving you more control and stability in your React applications.

  • Improvement: Server Component Key in DevTools
    We've enhanced DevTools to display the key of a Server Component, aiding the reconciliation process and preserving instance equality during reorders. This improvement helps you better understand component hierarchies and relationships, even if keys can be a bit confusing with filtering.

  • Bugfix: Path Fix in CI Workflow
    We've corrected an incorrect path in the compiler_typescript.yml GitHub Actions workflow. This fix ensures that the workflow triggers correctly when changes are made, keeping our CI process running smoothly.

  • Bugfix: unstable_useContextWithBailout Dispatcher Assignment
    We've fixed an issue with the unstable_useContextWithBailout dispatcher assignment, ensuring unique assignments across different dispatcher instances. This fix is all about maintaining context integrity and preventing potential issues from shared references.

We hope these updates make your React journey even more enjoyable and efficient! Stay tuned for more exciting developments, and happy coding! 🎉

Included Commits

2024-08-09T17:21:24 See commit

This commit addresses an issue in the GitHub Actions workflow file compiler_typescript.yml, where the specified path for triggering jobs was incorrectly formatted. As a result, the workflow did not execute when changes were made to the file, potentially hindering the development process.

The fix involved modifying the path in the configuration from .github/workflows/compiler-typescript.yml to .github/workflows/compiler_typescript.yml, ensuring that the workflow correctly recognizes changes to the file. This simple yet crucial update helps maintain the automation of the continuous integration process by allowing the relevant jobs to run as intended when modifications are made.

Files changed

  • .github/workflows/compiler_typescript.yml
2024-08-12T19:36:49 See commit

This commit introduces enhancements to the React compiler's handling of temporaries in order to prevent unintended code reordering that could affect the behavior of side-effectful operations. Specifically, it promotes temporaries when necessary to maintain the original order of operations in the generated code. The changes involve modifications to the Pipeline.ts, CodegenReactiveFunction.ts, and PromoteUsedTemporaries.ts files, with a focus on ensuring that temporaries are promoted appropriately when they are interposed by operations that could potentially alter program state.

Additionally, the commit includes updates to the logic that identifies when a temporary should be promoted, particularly in scenarios involving destructuring and other complex assignments. This aims to preserve the intended execution order and prevent errors that arise from reassigning variables in a way that might lead to unexpected behaviors. The commit also adds test cases to validate these changes, ensuring that the compiler behaves correctly under various conditions involving temporary variables.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PromoteUsedTemporaries.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-reassign.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-reassign.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-storeprop.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-storeprop.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife.ts
2024-08-12T19:55:55 See commit

This commit introduces support for invoking macros as methods in the React compiler, expanding their usage beyond traditional function calls and JSX. The changes involve creating a schema that captures arbitrary member expressions, including wildcards, which allows for more flexible macro definitions such as myMacro.*.foo.bar. During the macro memoization process, the compiler now builds a map of partially-satisfied macro patterns, which enables it to recognize when a macro pattern is fully satisfied, at which point it treats the result of a property load as a macro value.

Additionally, the commit modifies various components of the codebase to accommodate these changes, including updates to the macro schema, memoization logic, and the parsing of custom macros in configuration. Tests have also been added to validate the new functionality, ensuring that macros can be utilized effectively in different contexts, such as with wildcards. This enhancement aims to improve the flexibility and usability of macros within React applications, thereby enriching the developer experience.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.js
  • compiler/packages/snap/src/SproutTodoFilter.ts
  • compiler/packages/snap/src/compiler.ts
2024-08-13T20:42:10 See commit

This commit addresses an issue in React's flight rendering system where aborting a synchronous operation could lead to unhandled promise rejection errors when an error is thrown afterward. The previous implementation failed to attach promise handlers upon encountering an error after an abort, resulting in unhandled rejections. The update modifies the rendering logic to ensure that when a component errors out after being aborted, the rejection is properly handled, preventing unhandled rejection errors from occurring.

The changes include enhancements to the rendering logic in the ReactFlightServer.js file and the addition of a test case in ReactFlightDOM-test.js to verify that synchronous errors after an abort do not result in unhandled rejections. The test confirms that when a component aborts and subsequently throws an error, the system correctly handles the error without propagating it as an unhandled rejection, thereby improving the robustness of the error handling in React's server components.

Files changed

  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
  • packages/react-server/src/ReactFlightServer.js
2024-08-14T15:04:42 See commit

The commit titled "Fix unstable_useContextWithBailout dispatcher assignment (#30692)" addresses an issue related to the assignment of the unstable_useContextWithBailout function within the React reconciler's dispatcher. The change ensures that the assignments for this function are unique across different dispatcher instances, which is crucial for maintaining the integrity of context usage in React. This fix highlights the importance of correctly assigning functions to specific dispatchers to prevent potential issues that could arise from shared references.

In the modified file ReactFiberHooks.js, the commit makes a single line change, replacing the assignment for the unstable_useContextWithBailout function from the HooksDispatcherOnUpdateInDEV to the HooksDispatcherOnRerenderInDEV. This adjustment is part of a broader effort to refine the handling of context in React, particularly in development mode, ensuring that context behaviors are predictable and stable across different lifecycle phases. Overall, this commit contributes to improving the reliability of context management in React applications.

Files changed

  • packages/react-reconciler/src/ReactFiberHooks.js
2024-08-14T15:16:51 See commit

This commit introduces support for Server Components in the React DevTools tree by adding VirtualInstances, which enhance the representation of Fiber structures. Each Fiber now retains a list of its parent Server Components in a new _debugInfo property. The algorithm traverses this information across different levels of _debugInfo, allowing for the consolidation of consecutive ReactComponentInfo instances into a single VirtualInstance. This approach ensures that a single Server Component instance, which may parent multiple children, is represented as one instance instead of multiple, thereby improving the efficiency of the tree structure.

However, the commit highlights challenges during updates, as a Fiber may be reparented, leading to the unmounting of previous instances and the mounting of new ones. This behavior can result in loss of selection, particularly during reorders of server component lists. The author suggests including keys for server components to enhance reconciliation during such reorders, which would address the common issues arising from this unmount/remount strategy. Additionally, the commit modifies naming conventions for improved clarity and organization within the code.

Files changed

  • packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
  • packages/react-devtools-shared/src/__tests__/store-test.js
  • packages/react-devtools-shared/src/backend/fiber/renderer.js
  • packages/react-devtools-shared/src/frontend/types.js
  • packages/react-devtools-shared/src/utils.js
2024-08-14T17:54:38 See commit

This commit introduces support for the useTransition hook in the Forget compiler, a part of the React codebase. The useTransition hook is a built-in React hook that provides a stable value similar to useState, and this update marks the startTransition function as stable. The changes include the addition of new identifiers and types related to useTransition, ensuring that the hook can be recognized and utilized correctly within the compiler's ecosystem.

In terms of implementation, the commit modifies several files to add the necessary definitions for useTransition, including its return type and behavior. It also includes test fixtures to validate that the integration of useTransition preserves existing memoization guarantees. Overall, this PR marks a significant enhancement to the React compiler by enabling the use of useTransition, which is essential for managing concurrent state updates in React applications.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.ts
2024-08-15T06:50:56 See commit

The commit introduces the function experimental_renderToHTML in the react-markup package, which is designed for generating embedded HTML markup, particularly for applications like email templates that utilize Server Components. The update modifies the package's metadata, changing its description to reflect the new functionality and includes a note of appreciation for Nikolai Mavrenkov for donating the package name. The function's name change from renderToHTML to experimental_renderToHTML indicates its experimental status, and the README has been updated accordingly to guide users on its usage.

Additionally, the commit includes extensive updates to the test files to accommodate the new function name, ensuring that all tests are aligned with the changes. The tests also verify that the new function properly handles various scenarios, including error handling for unsupported features like state or effect hooks, refs, and event handlers in the context of Server Components. This commit marks a significant step in enhancing the react-markup package's capabilities while signaling to users that the new rendering function is still in an experimental phase.

Files changed

  • packages/react-markup/README.md
  • packages/react-markup/package.json
  • packages/react-markup/src/ReactMarkupClient.js
  • packages/react-markup/src/ReactMarkupServer.js
  • packages/react-markup/src/__tests__/ReactMarkupClient-test.js
  • packages/react-markup/src/__tests__/ReactMarkupServer-test.js
2024-08-15T15:04:53 See commit

The commit titled "[Flight/DevTools] Pass the Server Component's 'key' as Part of the ReactComponentInfo" introduces a feature that allows the key of a Server Component to be displayed in the React DevTools. This enhancement facilitates the reconciliation process by preserving instance equality when components are reordered. Notably, the key can be passed down to child components, which may lead to some confusion, as the same key might appear as a prefix on child components. The commit highlights the potential for confusion when keys are applied, especially in the context of filtering, as keys are often associated with host instances that may not be immediately visible.

In terms of code changes, the commit includes modifications across several files, particularly in the tests and the React DevTools shared backend. Key attributes are now tracked and utilized to enhance the debugging experience, allowing developers to better understand component hierarchies and their relationships. The adjustments made in the testing files ensure that the new key functionality is properly validated, particularly in scenarios involving the reordering of Server Components. Overall, this commit aims to improve the development and debugging experience for React applications utilizing Server Components.

Files changed

  • packages/react-client/src/__tests__/ReactFlight-test.js
  • packages/react-devtools-shared/src/__tests__/store-test.js
  • packages/react-devtools-shared/src/backend/fiber/renderer.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
  • packages/react-server/src/ReactFlightServer.js
  • packages/shared/ReactTypes.js
2024-08-15T19:00:36 See commit

This commit introduces support for increment (++) and decrement (--) operations on member expressions within the React compiler. Specifically, it allows expressions like a.x++ to be processed similarly to assignment expressions, such as a.x += y. The implementation involves modifying the lowerExpression function to handle UpdateExpression nodes that contain member expressions. This includes generating temporary variables to store previous and updated values before saving the result back to the property, ensuring that the semantics of these operations are preserved.

Additionally, the commit includes a test plan that validates the new functionality through various scenarios, ensuring that the increment and decrement operations on member expressions work as intended. The changes involve a total of 51 lines of code modifications, with new test cases added to verify that the compiler correctly handles these expressions, thus enhancing the overall capability of the React compiler to manage member expression updates.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.js
2024-08-15T21:28:28 See commit

The commit titled "Implement prerender" introduces a new prerendering feature in the Flight framework, which parallels the existing functionality in Fizz. Instead of receiving an immediate stream result, the implementation now returns a promise that resolves to the stream once the prerendering process is complete. This promise will reject in the event of a fatal error during the rendering process, while it resolves successfully upon completion or if the rendering is aborted.

The changes encompass modifications across various files within the Flight framework, including updates to server and client components, test files, and the addition of several new static files. Key updates were made to the react-server-dom-esm, react-server-dom-turbopack, and react-server-dom-webpack packages, enhancing their respective server and static functionalities. Overall, this commit enhances the rendering capabilities of the Flight framework, improving error handling and streamlining the prerendering process.

Files changed

  • fixtures/flight/__tests__/__e2e__/smoke.test.js
  • fixtures/flight/server/global.js
  • fixtures/flight/server/region.js
  • fixtures/flight/src/App.js
  • packages/react-server-dom-esm/npm/static.js
  • packages/react-server-dom-esm/npm/static.node.js
  • packages/react-server-dom-esm/package.json
  • packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
  • packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js
  • packages/react-server-dom-esm/static.js
  • packages/react-server-dom-esm/static.node.js
  • packages/react-server-dom-turbopack/npm/static.browser.js
  • packages/react-server-dom-turbopack/npm/static.edge.js
  • packages/react-server-dom-turbopack/npm/static.node.js
  • packages/react-server-dom-turbopack/npm/static.node.unbundled.js
  • packages/react-server-dom-turbopack/package.json
  • packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
  • packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
  • packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js
  • packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js
  • packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js
  • packages/react-server-dom-turbopack/static.browser.js
  • packages/react-server-dom-turbopack/static.edge.js
  • packages/react-server-dom-turbopack/static.node.unbundled.js
  • packages/react-server-dom-webpack/npm/static.browser.js
  • packages/react-server-dom-webpack/npm/static.edge.js
  • packages/react-server-dom-webpack/npm/static.node.js
  • packages/react-server-dom-webpack/npm/static.node.unbundled.js
  • packages/react-server-dom-webpack/package.json
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
  • packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
  • packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
  • packages/react-server/src/ReactFlightServer.js
  • scripts/shared/inlinedHostConfigs.js