From 5733d6d562035e805a8f7cc1b65da59e1d8025f9 Mon Sep 17 00:00:00 2001 From: Sunil Pai Date: Tue, 15 Jan 2019 15:57:05 +0000 Subject: [PATCH 1/3] suggest useEffect when useLayoutEffect triggers in server rendering --- packages/react-dom/src/server/ReactPartialRendererHooks.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js index d5ca03dee81aa..bf0082da89f05 100644 --- a/packages/react-dom/src/server/ReactPartialRendererHooks.js +++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js @@ -281,7 +281,9 @@ export function useLayoutEffect( "be encoded into the server renderer's output format. This will lead " + 'to a mismatch between the initial, non-hydrated UI and the intended ' + 'UI. To avoid this, useLayoutEffect should only be used in ' + - 'components that render exclusively on the client.', + 'components that render exclusively on the client, or use useEffect ' + + "if it wasn't meant to affect the first render. See " + + 'https://fb.me/uselayouteffect-server-warning for more information', ); } From b1c8e5cafb626d917c8182238a822d69a347bcfd Mon Sep 17 00:00:00 2001 From: Sunil Pai Date: Fri, 18 Jan 2019 03:40:21 +0000 Subject: [PATCH 2/3] recommended change --- .../src/server/ReactPartialRendererHooks.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js index bf0082da89f05..2d64016700fcc 100644 --- a/packages/react-dom/src/server/ReactPartialRendererHooks.js +++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js @@ -278,12 +278,13 @@ export function useLayoutEffect( warning( false, 'useLayoutEffect does nothing on the server, because its effect cannot ' + - "be encoded into the server renderer's output format. This will lead " + - 'to a mismatch between the initial, non-hydrated UI and the intended ' + - 'UI. To avoid this, useLayoutEffect should only be used in ' + - 'components that render exclusively on the client, or use useEffect ' + - "if it wasn't meant to affect the first render. See " + - 'https://fb.me/uselayouteffect-server-warning for more information', + "be encoded into the server renderer's output format. This will lead" + + 'to a mismatch between the initial, non-hydrated UI, and the intended ' + + 'UI. If possible, replace useLayoutEffect with useEffect which ' + + "doesn't block the first paint. However, if this effect must run " + + 'before the user sees anything, you can change this component to only ' + + 'render on the client. To learn more, see ' + + 'https://fb.me/react-warning-server-uselayouteffect', ); } From 50af7858d2e522dff74873f1c5ce74d51aa19fff Mon Sep 17 00:00:00 2001 From: Sunil Pai Date: Fri, 18 Jan 2019 03:42:03 +0000 Subject: [PATCH 3/3] bah --- packages/react-dom/src/server/ReactPartialRendererHooks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js index 2d64016700fcc..a595a783717da 100644 --- a/packages/react-dom/src/server/ReactPartialRendererHooks.js +++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js @@ -278,7 +278,7 @@ export function useLayoutEffect( warning( false, 'useLayoutEffect does nothing on the server, because its effect cannot ' + - "be encoded into the server renderer's output format. This will lead" + + "be encoded into the server renderer's output format. This will lead " + 'to a mismatch between the initial, non-hydrated UI, and the intended ' + 'UI. If possible, replace useLayoutEffect with useEffect which ' + "doesn't block the first paint. However, if this effect must run " +