Effects
useIsClient
Reports false on the server and true after hydration.
Demo
live · imported from hookli
Server / first render
- isClient
- false
The panel starts as the server markup, then swaps after hydration — gate browser-only UI (portals, media queries) on this so the two renders match.
import { useIsClient } from "hookli";
export function Demo() {
const isClient = useIsClient();
if (!isClient) return <p>Rendering on the server…</p>;
return <p>Now running in the browser.</p>;
}Usage
import { useIsClient } from "hookli";
export function Demo() {
const isClient = useIsClient();
if (!isClient) return <p>Rendering on the server…</p>;
return <p>Now running in the browser.</p>;
}API
useIsClient(): booleanParameters
This hook takes no parameters.
Returns
| Name | Type | Description |
|---|---|---|
| isClient | boolean | false during server rendering and the first hydration pass, then true once mounted in the browser. Gate browser-only UI on it to keep both renders identical. |
Hook
The implementation, straight from hookli. Copy it, or install the package.
import { useEffect, useState } from "react";
export const useIsClient = () => {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
return isClient;
};