React useIsClient Hook

Ever tried to access browser APIs in React and hit hydration errors or "window is not defined" crashes during SSR? You know the drill—wrapping everything in typeof checks, dealing with server/client render mismatches, debugging hydration failures. This free open source React useIsClient custom hook handles all that client detection complexity so you can focus on building browser features instead of fighting SSR compatibility issues in your React applications.

useIsClient showcase

Simple client-side detection with SSR safety:

"use client";import * as React from "react";import { toast } from "sonner";import { Badge } from "@/components/ui/badge";import { Label } from "@/components/ui/label";import { useIsClient } from "@/components/ui/shadcn-io/use-is-client";export default function UseIsClientDemo() {  const isClient = useIsClient();  React.useEffect(() => {    if (isClient) {      toast.success("Client-side detected! 🌐", {        description: "Browser APIs are now available",      });    }  }, [isClient]);  return (    <div className="p-6 max-w-sm mx-auto space-y-6">      {/* Header */}      <div className="text-center space-y-2">        <h3 className="text-lg font-semibold">Client Detection Demo</h3>        <p className="text-sm text-muted-foreground">SSR-safe browser API access</p>      </div>            {/* Environment Status */}      <div className="space-y-2">        <Label className="text-sm font-medium">Environment</Label>        <div className="bg-muted rounded p-3 min-h-[48px] flex items-center justify-center">          <Badge variant={isClient ? "default" : "secondary"} className="text-lg px-4 py-2">            {isClient ? "🌐 Client" : "🖥️ Server"}          </Badge>        </div>      </div>      {/* Browser Info */}      <div className="space-y-2">        <Label className="text-sm font-medium">Browser APIs</Label>        <div className="bg-muted rounded p-2 min-h-[60px] flex items-center justify-center">          {isClient ? (            <div className="text-xs space-y-1 text-center">              <div>Window: <Badge variant="outline" className="text-xs px-1 py-0">Available</Badge></div>              <div>Screen: <Badge variant="outline" className="text-xs px-1 py-0">{window.screen.width}x{window.screen.height}</Badge></div>            </div>          ) : (            <span className="text-xs text-muted-foreground">Waiting for client...</span>          )}        </div>      </div>      {/* Instructions */}      <div className="text-center min-h-[20px] flex items-center justify-center">        <div className="text-xs text-muted-foreground">          {isClient ? "Browser APIs ready to use" : "SSR mode - no browser APIs"}        </div>      </div>    </div>  );}

"use client"import { useEffect, useState } from "react"export function useIsClient() {  const [isClient, setClient] = useState(false)  useEffect(() => {    setClient(true)  }, [])  return isClient}

This free open source React hook simplifies browser API access with TypeScript support for modern JavaScript applications. Whether you're building localStorage features, browser detection, or client-only components in your Next.js projects, this React hook keeps your SSR rendering safe.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/use-is-client.json

npx shadcn@latest add https://www.shadcn.io/registry/use-is-client.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-is-client.json

bunx shadcn@latest add https://www.shadcn.io/registry/use-is-client.json

Why most client detection implementations suck

Look, you could keep writing typeof window !== 'undefined' checks everywhere. But then you hit the hydration wall—server renders one thing, client renders another, React throws hydration mismatches. Before you know it, you're debugging inconsistent renders.

Most developers use typeof window !== 'undefined' checks that prevent crashes but still cause hydration mismatches in React applications. Or they access browser APIs directly without SSR protection, leading to "window is not defined" errors. Some try to handle server/client differences manually and create complex conditional rendering in TypeScript components.

This React hook uses the useEffect pattern to safely detect client-side execution in Next.js projects. It starts as false (matching server-side), then switches to true after hydration. No more hydration errors.

Plus it's declarative. Instead of scattering window checks throughout your components, you have one reliable boolean that tells you when browser APIs are available in JavaScript applications.

This free open source React hook manages client detection while you focus on building features. Whether you're creating React applications, Next.js sites, or TypeScript components, reliable SSR compatibility keeps your JavaScript development smooth.

Features

• SSR compatible prevents hydration mismatches in server-side rendered apps in React applications
• Simple boolean API returns true when browser APIs are safely available in TypeScript components
• Hydration safe starts as false, becomes true after client hydration in Next.js projects
• Zero dependencies lightweight hook using only React primitives for JavaScript development
• TypeScript support with complete type definitions and IntelliSense integration
• Performance optimized uses useEffect for minimal overhead in React frameworks
• Free open source designed for modern React development workflows

When you'll actually use this

Real talk—this isn't for every component in React applications. Most React code works fine on both server and client. But when you need browser-specific APIs or want to prevent hydration issues, this React hook is essential in Next.js projects.

Perfect for:

• Browser API access - Window, document, navigator objects safely built with TypeScript
• LocalStorage operations - Read/write browser storage without crashes using React patterns
• Client-only features - Geolocation, clipboard, notifications in JavaScript applications
• Third-party scripts - Load analytics or client-only libraries in React components
• Responsive detection - JavaScript-based media query handling in Next.js applications
• Random content - Generate client-side values without hydration errors using TypeScript safety

API Reference

useIsClient

useIsClient(): boolean

Returns a boolean value indicating whether the code is running on the client side.

Common gotchas

Fallback content is mandatory: Always provide fallbacks during SSR in React applications. Show loading states, skeletons, or safe defaults when isClient is false. Don't just render nothing - it causes layout shift.

Initial false state period: Even on the client, there's a brief moment during hydration where isClient is false in TypeScript components. Plan your UX accordingly for smooth transitions.

Avoid overuse patterns: Only use it when you actually need browser APIs or have hydration concerns in Next.js projects. Most React code works fine without client detection.

Suspense boundary integration: Use React Suspense boundaries to handle the loading states more elegantly in JavaScript applications. This provides better user experience during hydration.

Content size consistency: Ensure fallback content matches the expected size of real content in React development to prevent layout shifts when switching from server to client rendering.

Browser API timing: Don't assume browser APIs are immediately available when isClient becomes true in TypeScript projects. Some APIs may still need additional checks.

Related hooks you will also like

Questions you might have