How toUse React Portal in Remix

Because React Portals needs an actual DOM element where to be attached, we can't just use them in a Remix app because when doing Server-Side Rendering it will fail since there's no DOM.

We can solve this by using Remix Utils' ClientOnly.

import { ClientOnly } from "remix-utils/client-only"; export default function Component() { return ( <ClientOnly> {() => createPortal(<Modal />, document.getElementById('modal-portal')} </ClientOnly> ) }

With this we'll delay the rendering to the Modal inside a Portal until hydration happens client-side.