dillon1000/react

Commit

Clean-up: Move Offscreen logic from Suspense fiber (#21925)

Much of the visibility-toggling logic is shared between the Suspense and
Offscreen types, but there is some duplicated code that exists in both.
Specifically, when a Suspense fiber's state switches from suspended to
resolved, we schedule an effect on the parent Suspense fiber, rather
than the inner Offscreen fiber. Then in the commit phase, the Suspense
fiber is responsible for committing the visibility effect on Offscreen.

There two main reasons we implemented it this way, neither of which
apply any more:

- The inner Offscreen fiber that wraps around the Suspense children used
  to be conditionally added only when the boundary was in its fallback
  state. So when toggling back to visible, there was no inner fiber to
  handle the visibility effect. This is no longer the case — the
  primary children are always wrapped in an Offscreen fiber.
- When the Suspense fiber is in its fallback state, the inner Offscreen
  fiber does not have a complete phase, because we bail out of
  rendering that tree. In the old effects list implementation, that
  meant the Offscreen fiber did not get added to the effect list, so
  it didn't have a commit phase. In the new recursive effects
  implementation, there's no list to maintain. Marking a flag on the
  inner fiber is sufficient to schedule a commit effect.

Given that these are no relevant, I was able to remove a lot of old
code and shift more of the logic out of the Suspense implementation
and into the Offscreen implementation so that it is shared by both.
(Being able to share the implementaiton like this was in fact one of
the reasons we stopped conditionally removing the inner
Offscreen fiber.)

As a bonus, this happens to fix a TODO in the Offscreen implementation
for persistent (Fabric) mode, where newly inserted nodes inside an
already hidden tree must also be hidden. Though we'll still need to
make this work in mutation (DOM) mode, too.
Browse files
Changed paths5 files
First-parent comparison
M packages/react-reconciler/src/ReactFiberCommitWork.new.js ModifiedM packages/react-reconciler/src/ReactFiberCommitWork.old.js ModifiedM packages/react-reconciler/src/ReactFiberCompleteWork.new.js ModifiedM packages/react-reconciler/src/ReactFiberCompleteWork.old.js ModifiedM packages/react-reconciler/src/__tests__/ReactOffscreen-test.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…