Fix: Selective hydration causing incorrect thenable type passed to DevTools (#26275)
Selective hydration is implemented by suspending the current render using a special internal opaque object. This is conceptually similar to suspending with a thenable in userspace, but the opaque object should not leak outside of the reconciler. We were accidentally passing this object to DevTool's markComponentSuspended function, which expects an actual thenable. This happens in the error handling path (handleThrow). The fix is to check for the exception reason before calling markComponentSuspended. There was already a naive check in place, but it didn't account for all possible enum values of the exception reason.
Andrew Clark committed
Mar 1, 2023 at 11:38 UTC
41110021f28100b16c11d6d9a248582c5bb6bc3c
1 file changed
+28
-13
packages/react-reconciler/src/ReactFiberWorkLoop.js
+28
-13
@@ -1846,19 +1846,34 @@ function handleThrow(root: FiberRoot, thrownValue: any): void {
1846
1847
if (enableSchedulingProfiler) {
1848
markComponentRenderStopped();
1849
- if (workInProgressSuspendedReason !== SuspendedOnError) {
1850
- const wakeable: Wakeable = (thrownValue: any);
1851
- markComponentSuspended(
1852
- erroredWork,
1853
- wakeable,
1854
- workInProgressRootRenderLanes,
1855
- );
1856
- } else {
1857
- markComponentErrored(
1858
- erroredWork,
1859
- thrownValue,
1860
- workInProgressRootRenderLanes,
1861
- );
1849
+ switch (workInProgressSuspendedReason) {
1850
+ case SuspendedOnError: {
1851
+ markComponentErrored(
1852
+ erroredWork,
1853
+ thrownValue,
1854
+ workInProgressRootRenderLanes,
1855
+ );
1856
+ break;
1857
+ }
1858
+ case SuspendedOnData:
1859
+ case SuspendedOnImmediate:
1860
+ case SuspendedOnDeprecatedThrowPromise:
1861
+ case SuspendedAndReadyToUnwind: {
1862
+ const wakeable: Wakeable = (thrownValue: any);
1863
+ markComponentSuspended(
1864
+ erroredWork,
1865
+ wakeable,
1866
+ workInProgressRootRenderLanes,
1867
+ );
1868
+ break;
1869
+ }
1870
+ case SuspendedOnHydration: {
1871
+ // This is conceptually like a suspend, but it's not associated with
1872
+ // a particular wakeable. DevTools doesn't seem to care about this case,
1873
+ // currently. It's similar to if the component were interrupted, which
1874
+ // we don't mark with a special function.
1875
+ break;
1876
+ }
1877
}
1878
}
1879
}