Utilities to render content on the client and skip SSR in a React app
This package distinguishes two ways of detecting client-side rendering: when a component is mounted and when it's hydrated. The primary use case for this is avoiding React's hydration mismatch errors, when a portion of SSR content and the corresponding client-side content are intentionally or inevitably different (such as when using values from localStorage, or new Date(), or Math.random(), or similar).
Checking whether a component is mounted requires a two-pass rendering[1] with useEffect under the hood. This approach may introduce a delay before rendering the required content each time the component gets mounted. Checking whether a component is hydrated is a way to eliminate the delay when the component is mounted after the hydration phase.
import { useMounted } from "react-clientside";
export const Component = () => {
let isMounted = useMounted();
return <p hidden={!isMounted}>Hidden unless mounted on the client</p>;
};import { MountedOnly } from "react-clientside";
export const Component = () => {
return <MountedOnly>Renders nothing before mounting</MountedOnly>;
};
export const ComponentWithFallback = () => {
return <MountedOnly fallback="SSR content">CSR content</MountedOnly>;
};import { useHydrated } from "react-clientside";
export const Component = () => {
let isHydrated = useHydrated();
return <p hidden={!isHydrated}>Hidden unless hydrated on the client</p>;
};import { HydratedOnly } from "react-clientside";
export const Component = () => {
return <HydratedOnly>Renders nothing before hydrating</HydratedOnly>;
};
export const ComponentWithFallback = () => {
return <HydratedOnly fallback="SSR content">CSR content</HydratedOnly>;
};