useIsHydrated

npm install @radix-ui/react-use-is-hydrated

function useIsHydrated(): boolean

import { useIsHydrated } from '@radix-ui/react-use-is-hydrated';

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

  if (!isHydrated) {
    // Return server-safe fallback
    return <div>Loading...</div>;
  }

  // Render client-only content after hydration
  return (
    <div>
      Current time: {new Date().toLocaleTimeString()}
    </div>
  );
}

import { useIsHydrated } from '@radix-ui/react-use-is-hydrated';

function GeolocationComponent() {
  const isHydrated = useIsHydrated();
  const [location, setLocation] = useState<GeolocationCoordinates | null>(null);

  useEffect(() => {
    if (isHydrated && 'geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        setLocation(position.coords);
      });
    }
  }, [isHydrated]);

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

  return (
    <div>
      {location 
        ? `Lat: ${location.latitude}, Lng: ${location.longitude}`
        : 'Location unavailable'
      }
    </div>
  );
}

import { useIsHydrated } from '@radix-ui/react-use-is-hydrated';

function UserPreferences() {
  const isHydrated = useIsHydrated();
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    if (isHydrated) {
      // Only access localStorage after hydration
      const savedTheme = localStorage.getItem('theme') || 'light';
      setTheme(savedTheme);
    }
  }, [isHydrated]);

  // Render neutral state until hydrated to avoid mismatch
  if (!isHydrated) {
    return <div className="theme-neutral">Content</div>;
  }

  return <div className={`theme-${theme}`}>Content</div>;
}

import { useIsHydrated } from '@radix-ui/react-use-is-hydrated';

function EnhancedButton() {
  const isHydrated = useIsHydrated();
  const [count, setCount] = useState(0);

  return (
    <button 
      onClick={() => setCount(c => c + 1)}
      disabled={!isHydrated}
    >
      {isHydrated ? `Clicked ${count} times` : 'Enable JavaScript'}
    </button>
  );
}

import { useIsHydrated } from '@radix-ui/react-use-is-hydrated';

function AnalyticsWrapper({ children }: { children: React.ReactNode }) {
  const isHydrated = useIsHydrated();

  useEffect(() => {
    if (isHydrated) {
      // Initialize analytics only after hydration
      initializeAnalytics();
    }
  }, [isHydrated]);

  return <>{children}</>;
}