useIsClient

useIsClient es un Hook de React que devuelve true solo en el entorno del cliente. Su uso principal es distinguir entre el renderizado en el cliente y el renderizado en el servidor (SSR). El estado cambia a true únicamente después de que el componente se monta en el entorno del cliente.

Interfaz

function useIsClient(): boolean;

Parámetros

Esta función no acepta parámetros.

Valor de retorno

• boolean
  

  Devuelve true en un entorno del cliente y false en caso contrario.

Ejemplo

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

  if (!isClient) {
    return <div>Cargando...</div>; // Renderizado en el servidor
  }

  return <div>Contenido renderizado en el cliente</div>; // Renderizado en el cliente
}

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>Tema actual: {theme}</div>;
}