Shadcn.io is not affiliated with official shadcn/ui
React useIsClient Hook
React useIsClient hook to detect client-side rendering. Returns false on server, true after hydration. SSR/Next.js safe.
React useIsClient Hook preview
Know when you're on the client in React. useIsClient returns false during SSR and true after hydration completes. Use it to safely access browser APIs like window, document, localStorage, or navigator. Prevents hydration mismatch errors in Next.js. Simple boolean return—no complex state. Perfect for conditionally rendering browser-only components, accessing Web APIs, or showing loading states during SSR. Works with Next.js App Router, Pages Router, and any SSR framework. Zero dependencies, zero config.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:
use shadcnio to install the use-is-client hook into my projectRelated Components
React useIsMounted Hook
Check if component is mounted
React useLocalStorage Hook
Persist state to localStorage
React useMediaQuery Hook
Respond to CSS media queries
React useWindowSize Hook
Track window dimensions
React useDarkMode Hook
Dark mode with system preference
React useIsomorphicLayoutEffect Hook
SSR-safe useLayoutEffect
FAQ
Was this page helpful?
Sign in to leave feedback.