useIsClient

A custom hook that returns whether the current rendering environment is the client.

Built on useSyncExternalStore, it accurately detects the client environment from the very first render — unlike a typical useEffect approach, which returns false on the initial render and causes a double render when it updates to true.

Difference from useIsMounted

• useIsClient: Checks whether the current rendering environment is the client. Returns true immediately even in a pure CSR environment without SSR.
• useIsMounted: Checks whether the component is actually mounted. Operates based on useEffect.

Code

🔗 View source code

Interface

typescript

function useIsClient(): boolean;

Returns

Name	Type	Description
isClient	boolean	true in a client environment, false in a server environment

Usage

Basic Usage

typescript

import { useIsClient } from '@modern-kit/react';

const Component = () => {
  const isClient = useIsClient();

  return <div>{isClient ? 'Client' : 'Server'}</div>;
};

Using Client-Only APIs Safely

Use this hook to safely access browser-only APIs such as window or navigator.

typescript

import { useIsClient } from '@modern-kit/react';

const Component = () => {
  const isClient = useIsClient();

  const userAgent = isClient ? navigator.userAgent : null;

  return <div>{userAgent ?? 'Server rendering...'}</div>;
};

Example

Check the current rendering environment below.

Current environment: ⚠️ Server

Key point: Uses useSyncExternalStore internally, so it returns the correct environment from the very first render without double rendering.