react changelog


Here's the latest and greatest from our development team! ๐Ÿš€


New Features

  • Enable feature flags for v19: We've turned on the feature flags for version 19 (v19) in the canary channel. This update includes enabling various experimental features like enableRefAsProp, disableStringRefs, and enableBigIntSupport. Get ready to experiment! ๐ŸŽ‰ (#28647)

Improvements

  • Remove IndeterminateComponent: We've streamlined the React codebase by removing the deprecated IndeterminateComponent. Say hello to IncompleteFunctionComponent for supporting Suspense in legacy mode. This change simplifies our code and removes outdated features. ๐Ÿงน (#28681)

  • Move string ref coercion to JSX runtime: The string ref implementation has been shifted from Fiber to the JSX runtime. This subtle change converts string refs to callback refs during element creation, affecting only Meta since string refs are disabled in open source. ๐Ÿ“ฆ (#28473)

  • Make class prop resolution faster: We've optimized class prop resolution by removing the ref prop before handling default props, eliminating the need to clone the object twice. This makes the process faster and more efficient. โšก (#28766)

Bugfixes

  • Emit Server Error Prefix in the .stack Property Too: Fixed an issue where the prefix of a server error wasn't displayed in the console when using V8. Now, the error message will be properly displayed, improving the debugging experience. ๐Ÿ› (#28738)

  • Fix: Class components should "consume" ref prop: Addressed the issue where class components did not automatically attach the class instance to the ref's current property. Now, the ref is removed from the props object before passing it to lifecycle methods, ensuring existing code doesn't break. ๐Ÿ› ๏ธ (#28719)

  • Hardcode enableLegacyFBSupport flag: Simplified the configuration by hardcoding the enableLegacyFBSupport flag to true, ensuring legacy Fiber support is always enabled. ๐Ÿ”ง (#28701)

Chores

  • Cleanup enableBigIntSupport flag: Cleaned up the enableBigIntSupport flag by removing its usage and imports across various files. ๐Ÿงผ (#28711)

That's all for now, folks! Keep coding and stay awesome! โœจ

Included Commits

2024-04-02T15:35:18 See commit

This commit hardcodes the enableLegacyFBSupport flag in the ReactFeatureFlags files, removing the ability to toggle this feature dynamically. The flag is set to true in both the www-dynamic.js and www.js files, ensuring that legacy Fiber support is enabled by default. This change involves modifying the files to remove the previous dynamic toggling of the flag and setting it to true in both files.

By hardcoding the enableLegacyFBSupport flag to true, the commit simplifies the configuration and ensures that legacy Fiber support is always enabled without the need for dynamic toggling. This change streamlines the code by removing the dynamic aspect of this feature and sets it to a default value across both files.

Files changed

  • packages/shared/forks/ReactFeatureFlags.www-dynamic.js
  • packages/shared/forks/ReactFeatureFlags.www.js
2024-04-03T00:42:43 See commit

This commit removes the concept of IndeterminateComponent from the React codebase. IndeterminateComponent was used to determine whether a component is a FunctionComponent or a ClassComponent when it first renders. This feature was deprecated and put behind a flag, which has now been removed along with the warnings related to it. The commit also introduces a new concept called IncompleteFunctionComponent to support Suspense in legacy mode, which is only needed as long as legacy mode is around.

Several changes were made across different files to implement these modifications. The PR relands a previous change on top of the flag removal and includes a test demonstrating a breakage in Suspense for legacy mode. Additionally, functions like renderIndeterminateComponent were updated to renderFunctionComponent instead, reflecting the removal of the IndeterminateComponent concept. Overall, this commit streamlines the React codebase by removing deprecated features and introducing necessary changes for better functionality.

Files changed

  • packages/react-devtools-shared/src/backend/renderer.js
  • packages/react-devtools-shared/src/backend/types.js
  • packages/react-reconciler/src/ReactFiber.js
  • packages/react-reconciler/src/ReactFiberBeginWork.js
  • packages/react-reconciler/src/ReactFiberCompleteWork.js
  • packages/react-reconciler/src/ReactFiberThrow.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
  • packages/react-reconciler/src/ReactWorkTags.js
  • packages/react-server/src/ReactFizzServer.js
2024-04-03T03:15:04 See commit

This commit addresses the issue where class components did not automatically attach the class instance to the ref's current property when a ref was passed as a prop. Unlike function components, where an extra step is required to attach a ref to an instance, class components now handle this automatically. Existing class component code was written with the assumption that a ref would not be passed as a prop, so to maintain this expectation, the ref is now removed from the props object before passing it to lifecycle methods. This change ensures that the ref attaches to the outer component instead of the inner one, preventing existing code from breaking.

Additionally, the commit introduces a resolution process for default props in class components, removing the ref prop when enableRefAsProp is enabled. This change affects various reconciler functions and ensures that default props are resolved correctly for class components. The commit also includes updates to tests and warning messages related to accessing the ref prop.

Files changed

  • packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
  • packages/react-reconciler/src/ReactFiberBeginWork.js
  • packages/react-reconciler/src/ReactFiberClassComponent.js
  • packages/react-reconciler/src/ReactFiberCommitWork.js
  • packages/react-reconciler/src/ReactFiberLazyComponent.js
  • packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js
  • packages/react/src/__tests__/ReactCreateElement-test.js
  • packages/react/src/__tests__/ReactJSXRuntime-test.js
2024-04-03T03:33:13 See commit

This commit enables feature flags for version 19 (v19) by updating the canary channel to represent v19 and turning on the flags. The changes include modifying the ReactFeatureFlags in the test-renderer module to set various experimental features to true, such as enableRefAsProp, disableStringRefs, enableBigIntSupport, and more. Additionally, the ReactFeatureFlags module is updated to set certain features like disableLegacyContext, useModernStrictMode, disableIEWorkarounds, enableFilterEmptyStringAttributesDOM, and others to true for experimental purposes.

Overall, this commit updates the feature flags for v19 by setting various experimental features to true in the ReactFeatureFlags modules for both test-renderer and shared modules. This allows for testing and enabling specific experimental features in the canary channel representing v19.

Files changed

  • packages/shared/ReactFeatureFlags.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.js
2024-04-03T13:25:02 See commit

This commit cleans up the enableBigIntSupport flag in various files by removing its usage and imports. The changes include modifications in ReactDOMComponent.js, ReactDOMOption.js, ReactFiberConfigDOM.js, ToStringValue.js, escapeTextForBrowser.js, ReactFizzConfigDOM.js, ReactDOMFiber-test.js, ReactDOMFizzServer-test.js, ReactDOMFiber-test.js, ReactDOMOption-test.js, ReactDOMServerIntegrationBasic-test.js, ReactDOMServerIntegrationInput-test.js, ReactDOMServerIntegrationSelect-test.js, ReactDOMServerIntegrationTextarea-test.js, ReactDOMTextarea-test.js, ReactMultiChildText-test.js, ReactChildFiber.js, ReactTopLevelText-test.js, ReactFizzServer.js, ReactChildren.js, and ReactChildren-test.js. Additionally, the enableBigIntSupport flag is removed from various ReactFeatureFlags files such as ReactFeatureFlags.native-fb-dynamic.js, ReactFeatureFlags.native-fb.js, ReactFeatureFlags.native-oss.js, ReactFeatureFlags.test-renderer.js, ReactFeatureFlags.test-renderer.native-fb.js, ReactFeatureFlags.test-renderer.www.js, ReactFeatureFlags.www-dynamic.js, ReactFeatureFlags.www.js, and ReactFeatureFlags.js.

Files changed

  • packages/react-dom-bindings/src/client/ReactDOMComponent.js
  • packages/react-dom-bindings/src/client/ReactDOMOption.js
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-dom-bindings/src/client/ToStringValue.js
  • packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
  • packages/react-dom-bindings/src/server/escapeTextForBrowser.js
  • packages/react-dom/src/__tests__/ReactDOMFiber-test.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
  • packages/react-dom/src/__tests__/ReactDOMInput-test.js
  • packages/react-dom/src/__tests__/ReactDOMOption-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
  • packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
  • packages/react-dom/src/__tests__/ReactMultiChildText-test.js
  • packages/react-reconciler/src/ReactChildFiber.js
  • packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js
  • packages/react-server/src/ReactFizzServer.js
  • packages/react/src/ReactChildren.js
  • packages/react/src/__tests__/ReactChildren-test.js
  • 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
2024-04-04T01:52:54 See commit

This commit addresses an issue where the prefix of a server error was not being displayed in the console when using V8, as the stack property only contained the error message. By updating the code to include the prefix in the .stack property as well, the error message will now be properly displayed in the console. The commit also mentions a possible alternative solution involving a nested error with a 'cause', but notes that this would require more complex serialization due to the server-generated prefix.

Specifically, the changes made in ReactFizzServer.js include modifying the encodeErrorForBoundary function to ensure that the errorStack property includes the prefix along with the error message. This adjustment will allow for the correct display of server errors in the console, improving the debugging experience for developers using V8.

Files changed

  • packages/react-server/src/ReactFizzServer.js
2024-04-05T14:53:11 See commit

This commit moves the implementation of string refs from Fiber to the JSX runtime. Now, the string is converted to a callback ref during element creation. This change in behavior will not affect accessing element.prop.ref or element.ref, as they will already be converted to a callback ref. However, this change only applies to Meta, as string refs are disabled in the open source version. If any issues arise due to this change, Meta will switch to a different ref type as a solution.

The commit includes modifications to several test files to accommodate this change. It also introduces a new function coerceStringRef to handle the coercion of string refs to callback refs. Additionally, warnings are added to notify users about the deprecation of string refs and recommend using useRef() or createRef() instead.

Files changed

  • packages/react-dom/src/__tests__/ReactComponent-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js
  • packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.js
  • packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
  • packages/react-dom/src/__tests__/multiple-copies-of-react-test.js
  • packages/react-dom/src/__tests__/refs-test.js
  • packages/react-reconciler/src/ReactChildFiber.js
  • packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
  • packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
  • packages/react/src/__tests__/ReactES6Class-test.js
  • packages/react/src/__tests__/ReactElementClone-test.js
  • packages/react/src/__tests__/ReactStrictMode-test.js
  • packages/react/src/__tests__/ReactTypeScriptClass-test.ts
  • packages/react/src/jsx/ReactJSXElement.js
2024-04-05T17:06:39 See commit

This commit aims to improve class prop resolution performance by optimizing the handling of the ref prop in React components. Previously, using delete to remove the ref prop would cause the object to deoptimize to a dictionary in V8 and other engines, impacting performance. To address this, the commit suggests manually iterating over all properties, similar to what the JSX runtime does, instead of using assign + delete. By moving the ref prop removal before handling default props, the need to clone the object twice is eliminated, resulting in a more efficient resolution process.

The changes in the commit involve updating the ReactFiberClassComponent.js and ReactFizzServer.js files to optimize the handling of ref prop removal and default props resolution. By making these adjustments, the commit aims to make class prop resolution faster and more efficient, ultimately improving the performance of React components.

Files changed

  • packages/react-reconciler/src/ReactFiberClassComponent.js
  • packages/react-server/src/ReactFizzServer.js