react changelog

Welcome to the latest updates! Here’s a rundown of the exciting new features, improvements, and bug fixes:

New Features

  • Implemented captureStackTrace and Owner Stacks on Server in Flight: Now, owner stacks are wired up to shared internals, exposing them to captureOwnerStack(). This enhances error logging and debugging by adding owner stacks to errors logged by React. 🎉

  • Fizz Debug Info: We’ve added the debugInfo feature to Fizz, allowing you to track Server Component parent stacks and the correct owner stack for lazy components. This makes debugging a breeze! 🕵️‍♂️

  • Track Current Debug Task for Error Callbacks in Fizz: Now, when an error is thrown, the current debug task is tracked and used to run onError callbacks within the task's context. This ensures the right async stack is shown during debugging.

Improvements

  • Console.createTask During SSR in Fizz: We’ve updated Fizz to run console.createTask during server-side rendering (SSR) when available. This allows you to view component stacks when inspecting the Node.js server using --inspect and Chrome DevTools. 🛠️

  • Enhanced Flow Support in Playground: The playground now better supports Flow files by assuming a file is a Flow file when it sees flow anywhere in the file. It parses these files using the Hermes parser and disables TypeScript-specific features of the Monaco editor.

Bugfixes

  • Gate LegacyContext Field on disableLegacyContext in Fizz: To conserve fields and avoid unnecessary runtime usage in modern builds, the legacyContext field is now gated on disableLegacyContext.

  • Clone Computation Block in Change Detection Mode: In change-detection mode, nodes are now cloned instead of spreading the contents of the computation block twice. This prevents mutations from affecting both places where the block is used, ensuring the overall transform result is not broken.

  • Regression Test for Issue #30172: Added an additional test to ensure deduped objects in nested children of blocked models are resolved correctly, preventing regressions.

  • No StrictMode Warnings for Production Renderer Builds: StrictMode warnings are now excluded from production renderer builds, as they are intended for development only. This ensures a cleaner display for React applications running in production mode.

That’s all for now! Keep coding and enjoy the new features and improvements! 🚀

Included Commits

2024-07-01T05:43:32 See commit

In change-detection mode, the contents of the computation block were previously spread into the result twice, causing issues with other babel passes that mutated the AST in-place. This commit addresses the issue by creating clones of the nodes instead of spreading them, preventing mutations from affecting both places where the block is used. By cloning the nodes, the overall transform result is no longer broken by actions at a distance caused by in-place mutations.

Specific changes include modifying the CodegenReactiveFunction.ts file in the babel-plugin-react-compiler package. Clones of nodes are now created in the codegenReactiveScope function to avoid issues with in-place mutations and ensure that changes are localized. This change resolves the problem and improves the overall functionality of the transformation process in change-detection mode.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
2024-07-01T13:50:45 See commit

This commit updates the Fizz server-side rendering to run console.createTask during SSR when available. This feature allows for viewing component stacks when inspecting the Node.js server running Fizz using --inspect and the Chrome DevTools. The changes include modifications to the dev:global and dev:region scripts in the fixtures/flight/package.json file, enabling the --inspect option with specific IP addresses and ports for debugging. Additionally, modifications to the ReactFizzServer.js file include the implementation of enableOwnerStacks for handling debug tasks during rendering, ensuring a smoother debugging experience.

Overall, this commit enhances the debugging capabilities of the Fizz server-side rendering by enabling the use of console.createTask during SSR, providing better visibility into component stacks when inspecting the Node.js server. The changes made to the scripts in the package.json file and the modifications to the ReactFizzServer.js file aim to improve the debugging process and make it easier to identify and troubleshoot issues during server-side rendering in a Fizz environment.

Files changed

  • fixtures/flight/package.json
  • packages/react-server/src/ReactFizzServer.js
2024-07-01T14:43:12 See commit

This commit addresses the issue of showing StrictMode warnings when React is running in production, as StrictMode is intended for development only. The change ensures that StrictMode warnings are not displayed for production renderer builds by setting supportsStrictMode to false in that scenario. The commit includes modifications to the renderer.js file in react-devtools-shared package, specifically updating the pushOperation function to exclude StrictMode warnings for production builds.

To test this change, screenshots were provided comparing the behavior before and after the modification, showing that the StrictMode warning is no longer displayed in the production renderer build. The code snippet in the commit includes the addition of a condition to check if the renderer build is a production build before deciding whether to include the StrictMode warning. Overall, this commit resolves the issue of unnecessary StrictMode warnings appearing in production, ensuring a cleaner and more appropriate display for React applications running in production mode.

Files changed

  • packages/react-devtools-shared/src/backend/renderer.js
2024-07-01T16:05:52 See commit

This commit improves the support for Flow files in the playground by making it more useful. Previously, the playground had limited support for Flow files, only parsing them if the // flow sigil was on the first line, which was not always the case for files users wanted to inspect. Additionally, component syntax was not supported due to dependence on the Hermes parser. With this update, the playground now assumes a file is a Flow file when it sees flow anywhere in the file, parses it using the Hermes parser, and disables TypeScript-specific features of the Monaco editor.

The changes include modifications to the EditorImpl.tsx, Input.tsx, types.d.ts, next.config.js, and package.json files, as well as updates to the yarn.lock file to incorporate the hermes-parser version 0.22.0. The improvements aim to enhance the flow support in the playground by enabling the parsing of Flow files with the Hermes parser and adjusting the Monaco editor to reflect the correct language based on the file content.

Files changed

  • compiler/apps/playground/components/Editor/EditorImpl.tsx
  • compiler/apps/playground/components/Editor/Input.tsx
  • compiler/apps/playground/lib/types.d.ts
  • compiler/apps/playground/next.config.js
  • compiler/apps/playground/package.json
  • compiler/yarn.lock
2024-07-01T19:30:00 See commit

This commit in the ReactFizzServer.js file gates the legacyContext field on disableLegacyContext. The changes include modifying the RenderTask and ReplayTask types to remove the legacyContext field and add it conditionally based on the disableLegacyContext flag. This change is made to conserve fields and avoid unnecessary runtime usage in modern builds. The commit also includes updates to functions like createRenderTask, createReplayTask, renderSuspenseBoundary, and spawnNewSuspendedReplayTask to handle the legacyContext field based on the disableLegacyContext flag.

Overall, this commit optimizes the handling of the legacyContext field in ReactFizzServer.js by controlling its usage based on the disableLegacyContext flag. By making this adjustment, unnecessary runtime overhead is avoided, and the codebase is streamlined for modern builds. The changes are implemented in various functions to ensure proper handling of the legacyContext field while maintaining efficiency and reducing the number of fields in use.

Files changed

  • packages/react-server/src/ReactFizzServer.js
2024-07-02T22:26:32 See commit

This commit implements the debugInfo feature in the Fizz library, allowing the tracking of Server Component parent stacks in Fizz. This feature also enables the tracking of the correct owner stack for lazy components. In Fiber, precautions are taken to avoid creating DEV-only fibers, but since the ReactFizzComponentStack data structures are used for debug metadata only, they can be expanded upon without concern.

The changes in this commit include modifications to the ReactHTMLServer-test file, updates to the ReactFiberComponentStack and ReactFizzComponentStack files, as well as changes to the ReactFizzServer file. These changes involve adding new functions for creating server component stacks, handling lazy components, and rendering elements destructively while maintaining component stack information for debugging purposes. Overall, this commit enhances the debugging capabilities of Fizz by implementing the debugInfo feature for tracking parent stacks and owner stacks accurately.

Files changed

  • packages/react-html/src/__tests__/ReactHTMLServer-test.js
  • packages/react-reconciler/src/ReactFiberComponentStack.js
  • packages/react-server/src/ReactFizzComponentStack.js
  • packages/react-server/src/ReactFizzServer.js
2024-07-02T23:46:18 See commit

This commit introduces a feature to track the current debugTask on the Task in order to run the onError callbacks within the context of that task when an error is thrown. This is done because neither console.error nor reportError reports the async stack associated with the error object, so the debugTask needs to be manually restored. By tracking the task that created the parent server component or Fiber, the error callbacks can be invoked correctly with the context of the task, improving the debugging experience when using node --inspect with Fizz.

The changes made in this commit involve updating the ReactFizzServer.js file to implement the tracking of the current debugTask and using it to run the error callbacks within the correct context. This functionality is similar to how tasks are tracked in other parts of the React codebase to ensure that errors are handled properly and the async stack is displayed accurately when debugging. Additionally, this commit was co-authored by Sebastian Silbermann, indicating collaboration on the implementation of this feature.

Files changed

  • packages/react-server/src/ReactFizzServer.js
2024-07-03T11:10:23 See commit

This commit addresses issue #30172 by adding a regression test for it in the ReactFlightDOMBrowser test file. The problem was previously fixed with changes from #29823, but the existing test in the file would have passed even before those changes were applied. Therefore, the author decided to add an additional test to ensure that the issue is properly resolved and to prevent any potential regressions. The new test specifically focuses on resolving deduped objects in nested children of blocked models, which would not succeed without the changes made in #29823.

The added test in the ReactFlightDOMBrowser file checks for resolving deduped objects in nested children of blocked models, ensuring that the issue reported in #30172 is properly addressed. The test involves creating components and rendering them to a readable stream, then checking the resulting HTML content to verify the expected outcome. By adding this test, the author aims to prevent any regressions and ensure that the fix implemented in #29823 continues to work effectively in resolving the reported issue.

Files changed

  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
2024-07-04T16:15:51 See commit

This commit implements the captureStackTrace and owner stacks on the Server in Flight. The owner stacks are wired up to the shared internals, exposing them to captureOwnerStack(). This implementation allows for capturing owner stacks during rendering in development mode. It also adds owner stacks to errors logged by React through consoleWithStackDev, with plans to eventually remove them. The commit also includes instrumentation for the console, allowing the client to control whether to add the stack back in or use console.createTask to control it.

Additionally, the commit includes changes to ReactFlight tests, ReactFlightDOMEdge tests, and the ReactFlightComponentStack module. It modifies the console to strip out appended component stacks before sending them to the client, ensuring that replayed logs do not include these stacks unless added by DevTools or console.createTask on the client side. The implementation keeps the owner stacks permanently enabled, similar to AsyncDispatcher, to support async contexts and stack capturing asynchronously.

Files changed

  • packages/react-client/src/__tests__/ReactFlight-test.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
  • packages/react-server/src/ReactFlightServer.js
  • packages/react-server/src/flight/ReactFlightComponentStack.js
  • packages/shared/consoleWithStackDev.js