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
1export const useHasMounted = () => {2 const [hasMounted, setHasMounted] = useState(false);3
4 useEffect(() => {5 setHasMounted(true);6 }, []);7
8 return hasMounted;9};