Use Mounted

A hook that returns a boolean to check when the component has mounted.

Installation

CLI

npx shadcn@latest add https://kelvinmai.io/r/use-mounted.json

Manual

Copy and paste the following code into your project

hooks/use-mounted.ts
'use client';



import * as React from 'react';



export const useMounted = () => {

  const [mounted, setMounted] = React.useState<boolean>(false);

  React.useEffect(() => {

    setMounted(true);

  }, []);

  return mounted;

};

Update the import paths to match your project setup

Usage

import { useMount } from '@/hooks/use-mounted';



const mounted = useMounted();

API Reference

Returns

The useMount hook returns the following boolean:

NameTypeDescription
mounted
boolean
Whether or not the current component has mounted.