From 41c3ca570f007fed216e83ea7d06be6f3fa9fbdc Mon Sep 17 00:00:00 2001 From: dan Date: Tue, 29 Mar 2022 23:13:07 +0100 Subject: [PATCH] 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 --- content/blog/2022-03-08-react-18-upgrade-guide.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/blog/2022-03-08-react-18-upgrade-guide.md b/content/blog/2022-03-08-react-18-upgrade-guide.md index 8693b7ef..ec213fae 100644 --- a/content/blog/2022-03-08-react-18-upgrade-guide.md +++ b/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 `` 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.