Hooks
Browser hooks
useIsClient

useIsClient

Determine whether the code is running on the client-side or server-side with useIsClient.

Installation

Copy and paste the following code into your project.

use-is-client.ts

import React from "react";

export function useIsClient() {
  const [isClient, setIsClient] = React.useState(false);

  React.useEffect(() => {
    setIsClient(true);
  }, []);

  return isClient;
}

Update the import paths to match your project setup.

Usage

import { useIsClient } from "@/hooks/use-is-client";

function MyComponent() {
  const isClient = useIsClient();

  return <div>{isClient ? "Client-side" : "Server-side"}</div>;
}

Return value

Name	Type	Description
isClient	boolean	true if component is mounted, false otherwise.

Getting Started

Components

Hooks

Browser

Elements

Sensors

State

Utilities

useIsClient

Installation

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Return value

Product

Community

Support