usehooks icon indicating copy to clipboard operation
usehooks copied to clipboard

useLayoutEffect seldomly creating long render time with React's renderToPipeableStream in SSR

Open timwuhaotian opened this issue 9 months ago • 0 comments

  • The onShellReady and onAllReady both hits > 4 seconds 1 out of 10 times with using useWindowSize and useOrientation hook

  • 90% of the time, the time is < 100ms

  • after replace them with local implementation which uses useEffect, the long render time does not happen again.

https://react.dev/reference/react-dom/server/renderToPipeableStream

    "react": "^18.2.0",
    "react-dom": "^18.2.0",

It generates the warning as well:

Warning: 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

timwuhaotian avatar May 08 '24 10:05 timwuhaotian