From 2f065ad3786e94e1cb347a8f35fd8c900cff4520 Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Sat, 19 Mar 2022 17:09:46 -0400 Subject: [PATCH 1/3] [18] Add flushSync to ReactDOM docs --- content/docs/reference-react-dom.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/content/docs/reference-react-dom.md b/content/docs/reference-react-dom.md index e6e1c55175c..97433cb3b59 100644 --- a/content/docs/reference-react-dom.md +++ b/content/docs/reference-react-dom.md @@ -26,7 +26,7 @@ The `react-dom` package also provides modules specific to client and server apps The `react-dom` package exports these methods: - [`createPortal()`](#createportal) - +- [`flushSync()`](#flushsync) These `react-dom` methods are also exported, but are considered legacy: - [`render()`](#render) @@ -55,6 +55,21 @@ createPortal(child, container) ``` Creates a portal. Portals provide a way to [render children into a DOM node that exists outside the hierarchy of the DOM component](/docs/portals.html). + +### `flushSync()` {#flushsync} + +```javascript +flushSync(callback) +``` + +Force React to flush updates synchronously. This method is useful for being able to read the value of `state` immediately. + +> Note: +> +> `flushSync` can have a significant impact on performance. Use sparingly. +> +> `flushSync` may also run pending effects and synchronously apply any updates they contain before returning. + ## Legacy Reference ### `render()` {#render} ```javascript From 22cdcb1293523a5c92a502cec7447315c178bc52 Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Sat, 19 Mar 2022 17:29:02 -0400 Subject: [PATCH 2/3] Seb feedback --- content/docs/reference-react-dom.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/docs/reference-react-dom.md b/content/docs/reference-react-dom.md index 97433cb3b59..00d98356ac2 100644 --- a/content/docs/reference-react-dom.md +++ b/content/docs/reference-react-dom.md @@ -62,12 +62,14 @@ Creates a portal. Portals provide a way to [render children into a DOM node that flushSync(callback) ``` -Force React to flush updates synchronously. This method is useful for being able to read the value of `state` immediately. +Force React to flush any updates inside the provided callback synchronously. This method is useful for being able to read the result of those updates immediately. > Note: > > `flushSync` can have a significant impact on performance. Use sparingly. > +> `flushSync` will force Suspense boundaries to show their `fallback` state. +> > `flushSync` may also run pending effects and synchronously apply any updates they contain before returning. ## Legacy Reference From 85a96077345fcdbc4719b319703d67cc1a3b83ec Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Sun, 20 Mar 2022 13:19:20 -0400 Subject: [PATCH 3/3] More Seb feedback --- content/docs/reference-react-dom.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/docs/reference-react-dom.md b/content/docs/reference-react-dom.md index 00d98356ac2..46a3eec6544 100644 --- a/content/docs/reference-react-dom.md +++ b/content/docs/reference-react-dom.md @@ -68,9 +68,11 @@ Force React to flush any updates inside the provided callback synchronously. Thi > > `flushSync` can have a significant impact on performance. Use sparingly. > -> `flushSync` will force Suspense boundaries to show their `fallback` state. +> `flushSync` may force pending Suspense boundaries to show their `fallback` state. > > `flushSync` may also run pending effects and synchronously apply any updates they contain before returning. +> +> `flushSync` may also flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback. ## Legacy Reference ### `render()` {#render}