Invariant that throws when committing wrong tree (#15517)

If React finishes rendering a tree, delays committing it (e.g.
Suspense), then subsequently starts over or renders a new tree, the
pending tree is no longer valid. That's because rendering a new work-in
progress mutates the old one in place.

The current structure of the work loop makes this hard to reason about
because, although `renderRoot` and `commitRoot` are separate functions,
they can't be interleaved. If they are interleaved by accident, it
either results in inconsistent render output or invariant violations
that are hard to debug.

This commit adds an invariant that throws if the new tree is the same as
the old one. This won't prevent all bugs of this class, but it should
catch the most common kind.

To implement the invariant, I store the finished tree on a field on the
root. We already had a field for this, but it was only being used for
the unstable `createBatch` feature.

A more rigorous way to address this type of problem could be to unify
`renderRoot` and `commitRoot` into a single function, so that it's
harder to accidentally interleave the two phases. I plan to do something
like this in a follow-up.
This commit is contained in:
Andrew Clark
2019-05-13 16:15:50 -07:00
committed by GitHub
parent 83fc258f29
commit cc24d0ea56
3 changed files with 37 additions and 21 deletions

View File

@@ -176,7 +176,7 @@
"174": "Expected host context to exist. This error is likely caused by a bug in React. Please file an issue.",
"175": "Expected prepareToHydrateHostInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.",
"176": "Expected prepareToHydrateHostTextInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.",
"177": "Cannot commit the same tree as before. This is probably a bug related to the return field. This error is likely caused by a bug in React. Please file an issue.",
"177": "Cannot commit the same tree as before. This error is likely caused by a bug in React. Please file an issue.",
"178": "Should have next effect. This error is likely caused by a bug in React. Please file an issue.",
"179": "Should have a pending commit. This error is likely caused by a bug in React. Please file an issue.",
"180": "Commit phase errors should be scheduled to recover with task priority. This error is likely caused by a bug in React. Please file an issue.",