useHydrated

The useHydrated hook is a utility for determining if the component has been hydrated on the client-side.

Usage

import { useHydrated } from "@frend-digital/ui/hooks";

function MyComponent() {
  const isHydrated = useHydrated();

  return (
    <div>
      {isHydrated ? "Component is hydrated" : "Component is not yet hydrated"}
    </div>
  );
}

Returns

• boolean: Returns true if the component has been hydrated, false otherwise.

Notes

Tip

This hook is particularly useful for components that need to render differently on the server versus the client, or for implementing isomorphic rendering strategies.

The useHydrated hook uses the useEffect hook internally to detect when the component has been mounted on the client-side. It starts with a default value of false and updates to true after the first render on the client.

Example

Here’s an example of how you might use useHydrated to conditionally render content:

import { useHydrated } from "@frend-digital/ui/hooks";

function HydratedContent() {
  const isHydrated = useHydrated();

  if (!isHydrated) {
    return <div>Loading...</div>;
  }

  return <div>{new Date().toString()}</div>;
}

In this example, the component will show a loading message until it has been hydrated on the client-side, after which it will display the actual content.