useIsClient

useIsClient は、クライアント側の環境でのみ true を返す React フックです。 主にクライアント側のレンダリングとサーバーサイドレンダリング（SSR）を区別するために使用します。 状態が true になるのは、クライアント側の環境でコンポーネントがマウントされた後だけです。

インターフェース

function useIsClient(): boolean;

パラメータ

この関数はパラメータを受け取りません。

戻り値

• boolean
  

  クライアント側の環境では true を、それ以外では false を返します。

使用例

function ClientSideContent() {
  const isClient = useIsClient();

  if (!isClient) {
    return <div>Loading...</div>; // サーバー側でレンダリングされます
  }

  return <div>Client-side rendered content</div>; // クライアント側でレンダリングされます
}

function ClientOnlyMap() {
  const isClient = useIsClient();

  if (!isClient) return null;

  return <div id="map" />;
}

function ClientTheme() {
  const isClient = useIsClient();

  const theme = isClient ? localStorage.getItem('theme') : 'light';

  return <div>Current theme: {theme}</div>;
}