Skip to content

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

Open
@timwuhaotian

Description

@timwuhaotian
  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions