@samitouri / QOS-React-2 / commits / 79ed5e18fd

Delete vestigial RetryAfterError logic (#23312)

This code was originally added to force a client render after receiving an error during hydration. Later we added the ForceClientRender to implement the same behavior, but scoped to an individual Suspense boundary instead of all the boundaries in the entire root. So it's now redudant. We had some test coverage already but I added another test specifically for the case of throwing a recoverable hydration error in the shell.

Andrew Clark committed Feb 17, 2022 at 09:24 UTC 79ed5e18fd5dba4148e3ca73da53fd6eef037209

5 files changed +85 -44

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

+77

@@ -1864,6 +1864,83 @@ describe('ReactDOMFizzServer', () => {

1864 }

1865 });

1866

1867 + // @gate experimental

1868 + it(

1869 + 'errors during hydration in the shell force a client render at the ' +

1870 + 'root, and during the client render it recovers',

1871 + async () => {

1872 + let isClient = false;

1873 +

1874 + function subscribe() {

1875 + return () => {};

1876 + }

1877 + function getClientSnapshot() {

1878 + return 'Yay!';

1879 + }

1880 +

1881 + // At the time of writing, the only API that exposes whether it's currently

1882 + // hydrating is the `getServerSnapshot` API, so I'm using that here to

1883 + // simulate an error during hydration.

1884 + function getServerSnapshot() {

1885 + if (isClient) {

1886 + throw new Error('Hydration error');

1887 + }

1888 + return 'Yay!';

1889 + }

1890 +

1891 + function Child() {

1892 + const value = useSyncExternalStore(

1893 + subscribe,

1894 + getClientSnapshot,

1895 + getServerSnapshot,

1896 + );

1897 + Scheduler.unstable_yieldValue(value);

1898 + return value;

1899 + }

1900 +

1901 + const spanRef = React.createRef();

1902 +

1903 + function App() {

1904 + return (

1905 + <span ref={spanRef}>

1906 + <Child />

1907 + </span>

1908 + );

1909 + }

1910 +

1911 + await act(async () => {

1912 + const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);

1913 + pipe(writable);

1914 + });

1915 + expect(Scheduler).toHaveYielded(['Yay!']);

1916 +

1917 + const span = container.getElementsByTagName('span')[0];

1918 +

1919 + // Hydrate the tree. Child will throw during hydration, but not when it

1920 + // falls back to client rendering.

1921 + isClient = true;

1922 + ReactDOM.hydrateRoot(container, <App />, {

1923 + onRecoverableError(error) {

1924 + Scheduler.unstable_yieldValue(error.message);

1925 + },

1926 + });

1927 +

1928 + // An error logged but instead of surfacing it to the UI, we switched

1929 + // to client rendering.

1930 + expect(() => {

1931 + expect(Scheduler).toFlushAndYield(['Yay!', 'Hydration error']);

1932 + }).toErrorDev(

1933 + 'An error occurred during hydration. The server HTML was replaced',

1934 + {withoutStack: true},

1935 + );

1936 + expect(getVisibleChildren(container)).toEqual(<span>Yay!</span>);

1937 +

1938 + // The node that's inside the boundary that errored during hydration was

1939 + // not hydrated.

1940 + expect(spanRef.current).not.toBe(span);

1941 + },

1942 + );

1943 +

1944 // @gate experimental

1945 it(

1946 'errors during hydration force a client render at the nearest Suspense ' +

packages/react-reconciler/src/ReactFiberBeginWork.new.js

-11

@@ -225,9 +225,6 @@ import {

225 markSkippedUpdateLanes,

226 getWorkInProgressRoot,

227 pushRenderLanes,

228 - getExecutionContext,

229 - RetryAfterError,

230 - NoContext,

228 } from './ReactFiberWorkLoop.new';

229 import {setWorkInProgressVersion} from './ReactMutableSource.new';

230 import {

@@ -2646,14 +2643,6 @@ function updateDehydratedSuspenseComponent(

2643 // but after we've already committed once.

2644 warnIfHydrating();

2645

2649 - if ((getExecutionContext() & RetryAfterError) !== NoContext) {

2650 - return retrySuspenseComponentWithoutHydrating(

2651 - current,

2652 - workInProgress,

2653 - renderLanes,

2654 - );

2655 - }

2656 -

2646 if ((workInProgress.mode & ConcurrentMode) === NoMode) {

2647 return retrySuspenseComponentWithoutHydrating(

2648 current,

packages/react-reconciler/src/ReactFiberBeginWork.old.js

-11

@@ -225,9 +225,6 @@ import {

225 markSkippedUpdateLanes,

226 getWorkInProgressRoot,

227 pushRenderLanes,

228 - getExecutionContext,

229 - RetryAfterError,

230 - NoContext,

228 } from './ReactFiberWorkLoop.old';

229 import {setWorkInProgressVersion} from './ReactMutableSource.old';

230 import {

@@ -2646,14 +2643,6 @@ function updateDehydratedSuspenseComponent(

2643 // but after we've already committed once.

2644 warnIfHydrating();

2645

2649 - if ((getExecutionContext() & RetryAfterError) !== NoContext) {

2650 - return retrySuspenseComponentWithoutHydrating(

2651 - current,

2652 - workInProgress,

2653 - renderLanes,

2654 - );

2655 - }

2656 -

2646 if ((workInProgress.mode & ConcurrentMode) === NoMode) {

2647 return retrySuspenseComponentWithoutHydrating(

2648 current,

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

+4 -11

@@ -245,11 +245,10 @@ const {

245

246 type ExecutionContext = number;

247

248 -export const NoContext = /* */ 0b0000;

249 -const BatchedContext = /* */ 0b0001;

250 -const RenderContext = /* */ 0b0010;

251 -const CommitContext = /* */ 0b0100;

252 -export const RetryAfterError = /* */ 0b1000;

248 +export const NoContext = /* */ 0b000;

249 +const BatchedContext = /* */ 0b001;

250 +const RenderContext = /* */ 0b010;

251 +const CommitContext = /* */ 0b100;

252

253 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6;

254 const RootInProgress = 0;

@@ -945,9 +944,6 @@ function performConcurrentWorkOnRoot(root, didTimeout) {

944 }

945

946 function recoverFromConcurrentError(root, errorRetryLanes) {

948 - const prevExecutionContext = executionContext;

949 - executionContext |= RetryAfterError;

950 -

947 // If an error occurred during hydration, discard server response and fall

948 // back to client side render.

949 if (root.isDehydrated) {

@@ -970,9 +966,6 @@ function recoverFromConcurrentError(root, errorRetryLanes) {

966 } else {

967 // The UI failed to recover.

968 }

973 -

974 - executionContext = prevExecutionContext;

975 -

969 return exitStatus;

970 }

971

packages/react-reconciler/src/ReactFiberWorkLoop.old.js