Add <ClientOnly>

[ryanflorence]

Lots of third party libs don't work with server rendering and we keep posting the same code in the discord to help out. Should probably just put it into Remix itself.

// global hydrating so future components don't do this dance, they just render
let hydrating = true;

// Component that renders `null` on the server and the initial browser render
// (while it's "hydrating")
function ClientOnly({ children }) {
  // set initial state to whatever the global hydrating is, so once the app is
  // hydrated, these components just render, no dance
  let [hydrated, setHydrated] = useState(() => !hydrating);

  // after hydration, rerender
  useEffect(() => {
    hydrating = false;
    setHydrated(true);
  }, []);

  // only render if hydrated
  return hydrated ? children : null;
}

[tchak]

My current use case is a code editor. I am rendering it wrapped in a ClientOnly component. But it means that during hydration there is an empty space. I am thinking that it would be cool to render static representation of highlighted code on the server and show it until the editor is ready. What would be the best pattern to achieve this?

[sergiodxa]

Maybe have a SSR fallback

<ClientOnly fallback={<EditorSSRFallback />}>
  <ActualEditor />
</ClientOnly>

In the fallback you can render something useful (like a <pre><code>{code here}</code></pre> to show the code) or at least an empty box of the same expected height to avoid a layout shift.

[ryanflorence]

Heck yes, and fallback is super easy:

let hydrating = true;

function ClientOnly({ children, fallback = null }) {
  let [hydrated, setHydrated] = useState(() => !hydrating);
  useEffect(() => {
    hydrating = false;
    setHydrated(true);
  }, []);
  return hydrated ? children : fallback;
}

I think I'd like to call it placeholder though instead of fallback. Fallback is like "this failed" or "we gave up" or something to me.

[sergiodxa]

I built this in my project as two parts, a useHydrated hook and a ClientOnly component.

import { useEffect, useState, ReactNode } from "react";

let hydrating = true;

export function useHydrated() {
  let [hydrated, setHydrated] = useState(() => !hydrating);

  useEffect(function hydrate() {
    hydrating = false;
    setHydrated(true);
  }, []);

  return hydrated;
}

type Props = {
  children: ReactNode;
  fallback?: ReactNode;
};

export function ClientOnly({ children, fallback = null }: Props) {
  return useHydrated() ? <>{children}</> : <>{fallback}</>;
}

With the hook I could do things like change attributes of an element if it's hydrated, e.g. I disable a fieldset if it's not hydrated because the fieldset has checkboxes which POST using useSubmit and they don't work without JS, but I still want to render them server-side.