Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 9x 9x 4x 9x | import { useEffect, useState } from "react";
/**
* Returns `false` during server-side rendering and the first client render,
* then `true` after hydration. The canonical guard for rendering client-only
* UI without causing hydration mismatches.
*
* Because the initial value is always `false` on both server and client, the
* first render matches the server output; the value flips to `true` in an
* effect that only runs on the client.
*
* @returns `true` once the component has mounted on the client, else `false`
*
* @example
* ```tsx
* function Component() {
* const isClient = useIsClient();
* return isClient ? <ClientOnlyWidget /> : <ServerFallback />;
* }
* ```
*
* @example
* ```tsx
* // Safely read browser-only APIs after hydration
* function Width() {
* const isClient = useIsClient();
* return <span>{isClient ? window.innerWidth : "—"}</span>;
* }
* ```
*/
export function useIsClient(): boolean {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
return isClient;
}
|