@samitouri / QOS-React-2 / commits / ea3ac58669

Fix Ref Lifecycles in Hidden Subtrees (#31379)

## Summary We're seeing certain situations in React Native development where ref callbacks in `<Activity mode="hidden">` are sometimes invoked exactly once with `null` without ever being called with a "current" value. This violates the contract for refs because refs are expected to always attach before detach (and to always eventually detach after attach). This is *particularly* bad for refs that return cleanup functions, because refs that return cleanup functions expect to never be invoked with `null`. This bug causes such refs to be invoked with `null` (because since `safelyAttachRef` was never called, `safelyDetachRef` thinks the ref does not return a cleanup function and invokes it with `null`). This fix makes use of `offscreenSubtreeWasHidden` in `commitDeletionEffectsOnFiber`, similar to how https://github.com/facebook/react/commit/ec52a5698e2dfea7050a0b015f0b79abfb2d81b7 did this for `commitDeletionEffectsOnFiber`. ## How did you test this change? We were able to isolate the repro steps to isolate the React Native experimental changes. However, the repro steps depend on Fast Refresh. ``` function callbackRef(current) { // Called once with `current` as null, upon triggering Fast Refresh. } <Activity mode="hidden"> <View ref={callbackRef} />; </Activity> ``` Ideally, we would have a unit test that verifies this behavior without Fast Refresh. (We have evidence that this bug occurs without Fast Refresh in real product implementations. However, we have not successfully deduced the root cause, yet.) This PR currently includes a unit test that reproduces the Fast Refresh scenario, which is also demonstrated in this CodeSandbox: https://codesandbox.io/p/sandbox/hungry-darkness-33wxy7 Verified unit tests pass: ``` $ yarn $ yarn test # Run with `-r=www-classic` for `enableScopeAPI` tests. $ yarn test -r=www-classic ``` Verified on the internal React Native development branch that the bug no longer repros. --------- Co-authored-by: Rick Hanlon <rickhanlonii@fb.com>

Timothy Yung committed Oct 31, 2024 at 13:24 UTC ea3ac586693014e882655728fc8396ecb1d6cf6e
2 files changed +140 -9
packages/react-reconciler/src/ReactFiberCommitWork.js
+15 -9
@@ -1325,7 +1325,9 @@ function commitDeletionEffectsOnFiber(
1325 }
1326 case ScopeComponent: {
1327 if (enableScopeAPI) {
1328 - safelyDetachRef(deletedFiber, nearestMountedAncestor);
1328 + if (!offscreenSubtreeWasHidden) {
1329 + safelyDetachRef(deletedFiber, nearestMountedAncestor);
1330 + }
1331 }
1332 recursivelyTraverseDeletionEffects(
1333 finishedRoot,
@@ -1335,7 +1337,9 @@ function commitDeletionEffectsOnFiber(
1337 return;
1338 }
1339 case OffscreenComponent: {
1338 - safelyDetachRef(deletedFiber, nearestMountedAncestor);
1340 + if (!offscreenSubtreeWasHidden) {
1341 + safelyDetachRef(deletedFiber, nearestMountedAncestor);
1342 + }
1343 if (disableLegacyMode || deletedFiber.mode & ConcurrentMode) {
1344 // If this offscreen component is hidden, we already unmounted it. Before
1345 // deleting the children, track that it's already unmounted so that we
@@ -1572,7 +1576,7 @@ function recursivelyTraverseMutationEffects(
1576 lanes: Lanes,
1577 ) {
1578 // Deletions effects can be scheduled on any fiber type. They need to happen
1575 - // before the children effects hae fired.
1579 + // before the children effects have fired.
1580 const deletions = parentFiber.deletions;
1581 if (deletions !== null) {
1582 for (let i = 0; i < deletions.length; i++) {
@@ -1637,7 +1641,7 @@ function commitMutationEffectsOnFiber(
1641 commitReconciliationEffects(finishedWork);
1642
1643 if (flags & Ref) {
1640 - if (current !== null) {
1644 + if (!offscreenSubtreeWasHidden && current !== null) {
1645 safelyDetachRef(current, current.return);
1646 }
1647 }
@@ -1660,7 +1664,7 @@ function commitMutationEffectsOnFiber(
1664 commitReconciliationEffects(finishedWork);
1665
1666 if (flags & Ref) {
1663 - if (current !== null) {
1667 + if (!offscreenSubtreeWasHidden && current !== null) {
1668 safelyDetachRef(current, current.return);
1669 }
1670 }
@@ -1745,7 +1749,7 @@ function commitMutationEffectsOnFiber(
1749 commitReconciliationEffects(finishedWork);
1750
1751 if (flags & Ref) {
1748 - if (current !== null) {
1752 + if (!offscreenSubtreeWasHidden && current !== null) {
1753 safelyDetachRef(current, current.return);
1754 }
1755 }
@@ -1961,7 +1965,7 @@ function commitMutationEffectsOnFiber(
1965 }
1966 case OffscreenComponent: {
1967 if (flags & Ref) {
1964 - if (current !== null) {
1968 + if (!offscreenSubtreeWasHidden && current !== null) {
1969 safelyDetachRef(current, current.return);
1970 }
1971 }
@@ -2074,10 +2078,12 @@ function commitMutationEffectsOnFiber(
2078 // TODO: This is a temporary solution that allowed us to transition away
2079 // from React Flare on www.
2080 if (flags & Ref) {
2077 - if (current !== null) {
2081 + if (!offscreenSubtreeWasHidden && current !== null) {
2082 safelyDetachRef(finishedWork, finishedWork.return);
2083 }
2080 - safelyAttachRef(finishedWork, finishedWork.return);
2084 + if (!offscreenSubtreeIsHidden) {
2085 + safelyAttachRef(finishedWork, finishedWork.return);
2086 + }
2087 }
2088 if (flags & Update) {
2089 const scopeInstance = finishedWork.stateNode;
packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
+125
@@ -305,6 +305,131 @@ describe('ReactFreshIntegration', () => {
305 }
306 });
307
308 + // @gate __DEV__ && enableActivity
309 + it('ignores ref for class component in hidden subtree', async () => {
310 + const code = `
311 + import {unstable_Activity as Activity} from 'react';
312 +
313 + // Avoid creating a new class on Fast Refresh.
314 + global.A = global.A ?? class A extends React.Component {
315 + render() {
316 + return <div />;
317 + }
318 + }
319 + const A = global.A;
320 +
321 + function hiddenRef() {
322 + throw new Error('Unexpected hiddenRef() invocation.');
323 + }
324 +
325 + export default function App() {
326 + return (
327 + <Activity mode="hidden">
328 + <A ref={hiddenRef} />
329 + </Activity>
330 + );
331 + };
332 + `;
333 +
334 + await render(code);
335 + await patch(code);
336 + });
337 +
338 + // @gate __DEV__ && enableActivity
339 + it('ignores ref for hoistable resource in hidden subtree', async () => {
340 + const code = `
341 + import {unstable_Activity as Activity} from 'react';
342 +
343 + function hiddenRef() {
344 + throw new Error('Unexpected hiddenRef() invocation.');
345 + }
346 +
347 + export default function App() {
348 + return (
349 + <Activity mode="hidden">
350 + <link rel="preload" href="foo" ref={hiddenRef} />
351 + </Activity>
352 + );
353 + };
354 + `;
355 +
356 + await render(code);
357 + await patch(code);
358 + });
359 +
360 + // @gate __DEV__ && enableActivity
361 + it('ignores ref for host component in hidden subtree', async () => {
362 + const code = `
363 + import {unstable_Activity as Activity} from 'react';
364 +
365 + function hiddenRef() {
366 + throw new Error('Unexpected hiddenRef() invocation.');
367 + }
368 +
369 + export default function App() {
370 + return (
371 + <Activity mode="hidden">
372 + <div ref={hiddenRef} />
373 + </Activity>
374 + );
375 + };
376 + `;
377 +
378 + await render(code);
379 + await patch(code);
380 + });
381 +
382 + // @gate __DEV__ && enableActivity
383 + it('ignores ref for Activity in hidden subtree', async () => {
384 + const code = `
385 + import {unstable_Activity as Activity} from 'react';
386 +
387 + function hiddenRef(value) {
388 + throw new Error('Unexpected hiddenRef() invocation.');
389 + }
390 +
391 + export default function App() {
392 + return (
393 + <Activity mode="hidden">
394 + <Activity mode="visible" ref={hiddenRef}>
395 + <div />
396 + </Activity>
397 + </Activity>
398 + );
399 + };
400 + `;
401 +
402 + await render(code);
403 + await patch(code);
404 + });
405 +
406 + // @gate __DEV__ && enableActivity && enableScopeAPI
407 + it('ignores ref for Scope in hidden subtree', async () => {
408 + const code = `
409 + import {
410 + unstable_Activity as Activity,
411 + unstable_Scope as Scope,
412 + } from 'react';
413 +
414 + function hiddenRef(value) {
415 + throw new Error('Unexpected hiddenRef() invocation.');
416 + }
417 +
418 + export default function App() {
419 + return (
420 + <Activity mode="hidden">
421 + <Scope ref={hiddenRef}>
422 + <div />
423 + </Scope>
424 + </Activity>
425 + );
426 + };
427 + `;
428 +
429 + await render(code);
430 + await patch(code);
431 + });
432 +
433 it('reloads HOCs if they return functions', async () => {
434 if (__DEV__) {
435 await render(`