react changelog

Hey there, fellow code wranglers! We've got some nifty updates and fixes coming your way. Check out the highlights below to see what's new and improved. 🚀

New Features

  • Add React Native Fork of consoleWithStackDev: We've added a React Native fork of consoleWithStackDev to enhance error handling and warning filtering for React Native. This update helps maintain the interplay between consoleWithStackDev, DevTools, and error dialogs in userspace.
  • Support for Serializing Map and Set in Console Logs: Now you can fully serialize Map and Set objects in console logs. This change ensures better debugging and logging of these data structures.
  • Feature Flag to Disable Legacy Context for Function Components: Introduced a feature flag to disable legacy context for function components, aiming to streamline the API and prepare for the complete removal of legacy context in the future.
  • Support for TSInterfaceDeclaration: Added support for TSInterfaceDeclaration in the compiler, fixing a previously unsupported scenario and ensuring that the transformation process handles such statements correctly.

Bugfixes

  • Remove propTypes on Instance Warning: Removed the outdated warning for using propTypes as an instance property in React 19 since propTypes are no longer supported.
  • Override getCurrentStack Temporarily While Printing Errors: Updated the Fiber module to override getCurrentStack temporarily for parent stacks while printing errors, ensuring proper error handling and stack trace appending.
  • Dedupe Legacy Context Warnings: Ensured that warnings about legacy APIs are only raised once per component, preventing duplicate warnings and improving the clarity of the warning system.

Improvements

  • Serialize Rate-Limited Objects in Console Logs: Introduced a marker for rate-limited objects in console logs, which can be emitted as a getter. Increased the object limit in console logs to optimize logging and reduce strain on server and client resources.

That's all for now, folks! Keep coding, keep improving, and stay awesome! 🎉👩‍💻👨‍💻

Included Commits

2024-07-09T17:29:50 See commit

This commit removes the warning for using propTypes as an instance property in React 19 as it is no longer supported. The commit includes changes to the ReactFiberClassComponent.js, ReactFizzClassComponent.js, ReactCoffeeScriptClass-test.coffee, ReactES6Class-test.js, and ReactTypeScriptClass-test.ts files to remove the warning message related to propTypes being defined as an instance property. The removal of this outdated warning aligns with the changes in React 19 where propTypes are no longer supported.

Overall, this commit updates multiple files to remove the warning message that was triggered when propTypes were defined as an instance property in React components. With the removal of this warning, developers using React 19 will no longer receive notifications about using propTypes in this way, as it is no longer a supported feature in the updated version of React.

Files changed

  • packages/react-reconciler/src/ReactFiberClassComponent.js
  • packages/react-server/src/ReactFizzClassComponent.js
  • packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
  • packages/react/src/__tests__/ReactES6Class-test.js
  • packages/react/src/__tests__/ReactTypeScriptClass-test.ts
2024-07-09T18:22:50 See commit

This commit fully supports serializing Map and Set objects in console logs. Previously, these objects were only serialized through the regular flow, but now they can also be serialized in console logs. This change was made because the console serialization is more forgiving than the regular serialization. The commit includes changes to ReactFlight-test.js and ReactFlightServer.js files, adding functions to serialize Map and Set objects specifically for console logging. The changes ensure that Map and Set objects are properly serialized in console logs, allowing for better debugging and logging of these data structures.

In ReactFlight-test.js, the commit adds code to test the serialization of Map objects in console logs, ensuring that the serialized Map objects are correctly logged and can be accessed and inspected. In ReactFlightServer.js, the commit includes functions to serialize Map and Set objects specifically for console logging, improving the overall logging experience when dealing with these data structures. Overall, this commit enhances the debugging capabilities of the application by enabling the proper serialization of Map and Set objects in console logs.

Files changed

  • packages/react-client/src/__tests__/ReactFlight-test.js
  • packages/react-server/src/ReactFlightServer.js
2024-07-09T23:55:09 See commit

This commit addresses the issue of legacy context warnings being duplicated by ensuring that warnings about legacy APIs are only raised once per component. The changes include modifications to the ReactDOMServerIntegrationLegacyContextDisabled test file, specifically removing references to clientRenderOnBadMarkup and adjusting the render count, as well as updates to ReactFiberClassComponent.js and ReactFizzClassComponent.js to handle legacy context types more efficiently. The modifications involve adding checks to prevent duplicate warnings about childContextTypes and contextTypes, ensuring that these warnings are only displayed once.

Overall, this commit streamlines the warning process for legacy context types in React components by preventing duplicate warnings from being raised. By implementing checks to track which warnings have already been issued for a specific component, the code now ensures that developers are only alerted to legacy context issues once per component, improving the clarity and efficiency of the warning system.

Files changed

  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContextDisabled-test.internal.js
  • packages/react-reconciler/src/ReactFiberClassComponent.js
  • packages/react-server/src/ReactFizzClassComponent.js
2024-07-10T04:15:00 See commit

This commit in the Fiber module overrides the getCurrentStack temporarily while printing errors, specifically for parent stacks. This change allows the regular mechanism for appending stack traces to be used, enabling features like polyfilling. The modification ensures that the automatic appending can be removed in the future.

The code in ReactFiberErrorLogger.js was updated with 17 additions and 16 deletions, totaling 33 changes. The getCurrentStack function is temporarily replaced with a custom function that returns the component stack for parent component stacks. This adjustment allows for proper error handling and printing, ensuring that the stack traces are appended correctly. The original getCurrentStack function is restored after error handling is completed, maintaining the integrity of the error logging process.

Files changed

  • packages/react-reconciler/src/ReactFiberErrorLogger.js
2024-07-10T04:15:15 See commit

This commit introduces a marker for rate-limited objects in console logs, which can be emitted as a getter. When accessed, a special error is thrown to inform the user about the rate limit. The object limit in console logs has also been increased, as it was previously set very low. The commit explains that these limits are per message and excessive logging can strain server memory and client performance, especially with cyclic objects. The commit discusses the tradeoff between lazy loading objects and retaining them in memory on the server.

In terms of code changes, the commit modifies ReactFlightClient.js and ReactFlightServer.js files to implement the serialization of limited objects and the handling of rate-limited objects in console logs. The commit includes additions and deletions in the code, with specific changes made to handle the serialization and logging of objects in console messages. By increasing the object limit and introducing markers for rate-limited objects, the commit aims to optimize console logging and reduce strain on server and client resources.

Files changed

  • packages/react-client/src/ReactFlightClient.js
  • packages/react-server/src/ReactFlightServer.js
2024-07-10T17:37:56 See commit

The commit adds a React Native fork of consoleWithStackDev to improve error handling and warning filtering for React Native. The mainline version of consoleWithStackDev is being removed, but React Native still requires it for filtering out warnings. This change is necessary to maintain the interplay between consoleWithStackDev, DevTools, and error dialogs in userspace.

The commit includes the addition of the RN fork of consoleWithStackDev in the shared folder and modifies the forks.js script to include the React Native bundle type. The new RN fork includes functions for warning and error handling, as well as appending stack information to error messages. This update ensures that React Native applications can effectively manage warnings and errors during development.

Files changed

  • packages/shared/forks/consoleWithStackDev.rn.js
  • scripts/rollup/forks.js
2024-07-11T02:11:04 See commit

This commit addresses an issue where the TypeScript TSInterfaceDeclaration was not supported in certain scenarios, leading to a build error. The commit includes changes to the BuildHIR.ts file to handle TSInterfaceDeclaration statements appropriately during transformation. A test was added to ensure that the fix is functioning correctly. The commit also includes additions to test fixtures to demonstrate the before and after states of code containing TSInterfaceDeclaration.

In summary, this commit adds support for TSInterfaceDeclaration in the compiler, fixing a previously unsupported scenario and ensuring that the transformation process handles such statements correctly. The changes include modifications to the code handling TSInterfaceDeclaration as well as additions to test fixtures to verify the functionality.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-inner-interface-types.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-inner-interface-types.ts
2024-07-11T20:21:12 See commit

This commit introduces a feature flag to disable legacy context for function components, with the ultimate goal of completely removing legacy context. The removal of legacy context for function components is seen as a step towards trimming down the API, even though the full removal process may take more time. The commit includes changes to several test files and code snippets related to rendering function components with and without context, as well as context merging and overriding scenarios. Additionally, the commit includes updates to feature flag configurations for different environments like React Native and the web.

By introducing a feature flag to disable legacy context for function components, the commit aims to streamline the API and pave the way for the complete removal of legacy context in the future. The changes made in this commit focus on updating test files to reflect the behavior of function components with and without context, ensuring that the legacy context is appropriately handled. Furthermore, the commit includes modifications to feature flag configurations across different environments to enable or disable the use of legacy context for function components based on specific needs and requirements.

Files changed

  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
  • packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
  • packages/react-reconciler/src/ReactFiberBeginWork.js
  • packages/react-reconciler/src/__tests__/ReactIncremental-test.js
  • packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
  • packages/react-reconciler/src/__tests__/ReactUse-test.js
  • packages/react-server/src/ReactFizzServer.js
  • packages/shared/ReactFeatureFlags.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