Flash of content with useIsMobile()

[dry tree]

There is a scenario where I would really like to use JS to properly fork component tree. However, there is a flash of the old before I believe hydration can clean things up. Using CSS to hide/show is less preferable here because then I have to actually create more higher level components (JS breaks if I render both regardless of CSS values). Is there a way to leave this for the browser (if it is indeed SSR problem)?

[indigo remnant]

If you're using client-side JS to determine what icon should show and it differs from what was rendered on the server, there's no way to avoid a flash.

Options you have

• See if you can determine what should show on the server
• Don't show anything until you hit the client (like you pointed out)
• Show a spinner or some sort of loading indicator

Is there a way to leave this for the browser

Something like ClientOnly is a good solution

<ClientOnly>
  <EditIcon />
</ClientOnly>