useIsMobile

Overview

The useIsMobile hook detects whether the current viewport width is below a specified breakpoint. It listens for window resize events and updates in real-time. Returns undefined during SSR for hydration safety.

Installation

Usage

Basic

import { useIsMobile } from '@/hooks/use-is-mobile';

function Navigation() {
  const isMobile = useIsMobile();

  if (isMobile === undefined) {
    return null; // or skeleton
  }

  return isMobile ? <MobileNav /> : <DesktopNav />;
}

Custom Breakpoint

function Sidebar() {
  const isMobile = useIsMobile(768); // Tablet breakpoint

  return isMobile ? <CollapsedSidebar /> : <ExpandedSidebar />;
}

Conditional Rendering

function Layout({ children }) {
  const isMobile = useIsMobile();

  return (
    <div className="layout">
      {!isMobile && <Sidebar />}
      <main>{children}</main>
      {isMobile && <BottomNav />}
    </div>
  );
}

API Reference

`useIsMobile`

function useIsMobile(breakpoint?: number): boolean | undefined;

Prop	Type	Default
`breakpoint?`	number	1024
`returns?`	boolean \| undefined	-

SSR Considerations

The hook returns undefined during server-side rendering and initial hydration because window is not available. This prevents hydration mismatches.

const isMobile = useIsMobile();

// Handle the undefined state
if (isMobile === undefined) {
  return <SkeletonLoader />;
}

// Safe to use boolean value
return isMobile ? <Mobile /> : <Desktop />;

Features

Real-time updates — Responds to window resize events
Custom breakpoints — Configure your own mobile threshold
SSR safe — Returns undefined during server rendering
Lightweight — No dependencies, uses native resize events

Common Breakpoints

Device	Breakpoint
Mobile	640px
Tablet	768px
Laptop	1024px (default)
Desktop	1280px

Credits

Inspired by responsive design patterns from modern component libraries

useIsMobile

On this page