useIsMounted

import { useIsMounted } from '@frontend-toolkit-js/hooks';
 
function Clock() {
  const isMounted = useIsMounted();
 
  // 서버에서는 false, 클라이언트에서는 true
  if (!isMounted) {
    return <div>Loading...</div>;
  }
 
  // 클라이언트에서만 실행
  return <div>{new Date().toLocaleString()}</div>;
}

function UserPreferences() {
  const isMounted = useIsMounted();
  const [theme, setTheme] = useState('light');
 
  useEffect(() => {
    if (isMounted) {
      const saved = localStorage.getItem('theme');
      if (saved) setTheme(saved);
    }
  }, [isMounted]);
 
  return <div className={theme}>...</div>;
}

function GeolocationComponent() {
  const isMounted = useIsMounted();
  const [location, setLocation] = useState(null);
 
  useEffect(() => {
    if (isMounted && 'geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(pos => {
        setLocation(pos);
      });
    }
  }, [isMounted]);
 
  return <div>...</div>;
}

function ServerSafeTime() {
  const isMounted = useIsMounted();
 
  // 서버와 클라이언트의 시간이 다르면 hydration 에러 발생
  if (!isMounted) {
    return <div>--:--:--</div>;
  }
 
  return <div>{new Date().toLocaleTimeString()}</div>;
}

function useIsMounted(): boolean;

export function useIsMounted(): boolean {
  const [mounted, setMounted] = useState(false);
 
  useEffect(() => {
    setMounted(true);
  }, []);
 
  return mounted;
}

// ❌ Bad: 단순 렌더링에는 불필요
function SimpleComponent() {
  const isMounted = useIsMounted();
  return <div>Hello</div>;
}
 
// ✅ Good: 브라우저 API 사용 시에만
function BrowserAPIComponent() {
  const isMounted = useIsMounted();
 
  useEffect(() => {
    if (isMounted) {
      // 브라우저 API 사용
    }
  }, [isMounted]);
}

1. 서버/클라이언트 초기 렌더: isMounted = false
2. useEffect 실행: setState(true)
3. 리렌더링: isMounted = true

// useIsMounted 대신
<div suppressHydrationWarning>{new Date().toLocaleString()}</div>

const isMounted = useIsMounted();
//    ^? boolean (자동 추론)
 
if (isMounted) {
  // 타입 가드 없이 바로 사용 가능
  localStorage.getItem('key');
}