use-is-hydrated 💧✅

Hello Hydration Hero! 🦸‍♀️

The use-is-hydrated hook is a utility to determine if your React component has finished "hydrating" on the client after being server-side rendered (SSR).

It's like a little sensor 🌡️ that tells you, "Okay, the JavaScript has fully taken over this part of the page!"

Why is this useful?

Sometimes, you want to render something only on the client-side, or behave differently after hydration to avoid SSR mismatches or to enable client-specific functionality (like browser APIs that aren't available during SSR).

• Avoiding Mismatches: Ensure UI consistency between server and client.
• Client-Only Components: Delay rendering of components that rely on browser environment.
• Performance: Defer non-critical client-side logic until after hydration.

Basic Usage:

import { useIsHydrated } from '@ryvora/react-use-is-hydrated'; // Hook name might vary
import React from 'react';

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

  if (!isHydrated) {
    // Render a placeholder or nothing during SSR and initial client render before hydration
    return <div>Loading client-specific content...</div>;
  }

  // This will only render after hydration on the client
  return (
    <div>
      <p>Welcome! The time is: {new Date().toLocaleTimeString()}</p>
      {/* Other client-side only components or logic */}
    </div>
  );
}

// Example of a component that should only render on the client
function ClientOnlyComponent() {
  const isHydrated = useIsHydrated();
  if (!isHydrated) return null;
  return <div>I only appear on the client! ✨</div>;
}

Keep your SSR smooth and your client-side enhancements well-timed! 🕰️🚀