Browse Source

Document the new consistent Suspense behavior (#4517)

* Document the new consistent Suspense behavior

* Update 2022-03-08-react-18-upgrade-guide.md

* Update 2022-03-08-react-18-upgrade-guide.md
main
dan 3 years ago
committed by GitHub
parent
commit
41c3ca570f
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      content/blog/2022-03-08-react-18-upgrade-guide.md

1
content/blog/2022-03-08-react-18-upgrade-guide.md

@ -259,6 +259,7 @@ If you need to support Internet Explorer we recommend you stay with React 17.
* **Consistent useEffect timing**: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event. Previously, the behavior wasn't always predictable or consistent.
* **Stricter hydration errors**: Hydration mismatches due to missing or extra text content are now treated like errors instead of warnings. React will no longer attempt to "patch up" individual nodes by inserting or deleting a node on the client in an attempt to match the server markup, and will revert to client rendering up to the closest `<Suspense>` boundary in the tree. This ensures the hydrated tree is consistent and avoids potential privacy and security holes that can be caused by hydration mismatches.
* **Suspense trees are always consistent:** If a component suspends before it's fully added to the tree, React will not add it to the tree in an incomplete state or fire its effects. Instead, React will throw away the new tree completely, wait for the asynchronous operation to finish, and then retry rendering again from scratch. React will render the retry attempt concurrently, and without blocking the browser.
* **Layout Effects with Suspense**: When a tree re-suspends and reverts to a fallback, React will now clean up layout effects, and then re-create them when the content inside the boundary is shown again. This fixes an issue which prevented component libraries from correctly measuring layout when used with Suspense.
* **New JS Environment Requirements**: React now depends on modern browsers features including `Promise`, `Symbol`, and `Object.assign`. If you support older browsers and devices such as Internet Explorer which do not provide modern browser features natively or have non-compliant implementations, consider including a global polyfill in your bundled application.

Loading…
Cancel
Save