useHasMounted
Detect mounting on client-side to avoid hydration edge-cases.
Component Mount Status:
Not mounted yet...
View source
A simple hook that tracks whether a component has mounted on the client. Returns false during the initial render (server-side or first client render) and true after the component mounts. This is essential for avoiding hydration mismatches in Next.js when rendering content that differs between server and client.
Features
- Prevents hydration mismatches in server-rendered applications
- Simple boolean return value for easy conditional rendering
- Lightweight and performant with minimal overhead
use-has-mounted.ts
1import { useEffect, useState } from 'react';2
3export const useHasMounted = () => {4 const [hasMounted, setHasMounted] = useState(false);5
6 useEffect(() => {7 setHasMounted(true);8 }, []);9
10 return hasMounted;11};