use-hydration
Utility hook to check if we're in client-side context
If you're using React, this hook is not required
Sometimes you want to do client stuff with DOM or calling client functions, but the component didn't mount yet so you would get an error. With this hook you can easily solve the issue.
Why is it useful?
Installation
Copy and paste the following code into your project.
"use client";
import { useEffect, useState } from "react";
/**
* Hook to check if we're in client-side context
* @returns {boolean} isMounted
*/
export const useHydration = (): boolean => {
const [isMounted, setIsMounded] = useState(false);
useEffect(() => {
setIsMounded(true);
}, []);
return isMounted;
};Usage
import { useHydration } from "@/hooks/use-hydration";const isMounted = useHydration();
// remember: all hooks must be before return statement
if (!isMounted) return null;
return (
// Component with client code
)