HuGo Posts - Answer Overflow

HuGo

•Created by HuGo on 4/6/2025 in #help

Next.js Hydration Error Linked to useActiveOrganization Hook

Hi, is it normal if I have a hydration problem when I use isPending from useActiveOrganization? Since I added ‘isPending’ I get hydration errors when I refresh. It's possible to refresh the first time without getting the error, but on the second refresh it does. I wrote this, which reproduces the bug perfectly. Im using nextJS 15.2

"use client";

import { useActiveOrganization } from "@/lib/auth-client";
import { Skeleton } from "@/components/ui/skeleton";

export default function DebugActiveOrganizationContent() {
  const { data: activeOrganization, isPending: isActiveOrgPending } =
    useActiveOrganization();

  if (isActiveOrgPending) {
    return (
      <div className="p-4 border rounded-md space-y-2">
        <p>Loading active organization...</p>
        <Skeleton className="h-4 w-[200px]" />
        <Skeleton className="h-4 w-[150px]" />
      </div>
    );
  }

  if (!activeOrganization) {
    return (
      <div className="p-4 border border-red-200 bg-red-50 rounded-md">
        <p className="text-red-700">
          No active organization found or error during loading.
        </p>
      </div>
    );
  }

  return (
    <div className="p-4 border border-green-200 bg-green-50 rounded-md">
      <h3 className="text-lg font-semibold text-green-800">
        Active Organization Loaded:
      </h3>
      <pre className="mt-2 text-sm text-green-700 bg-green-100 p-2 rounded">
        {JSON.stringify(activeOrganization, null, 2)}
      </pre>
    </div>
  );
}

"use client";

import { useActiveOrganization } from "@/lib/auth-client";
import { Skeleton } from "@/components/ui/skeleton";

export default function DebugActiveOrganizationContent() {
  const { data: activeOrganization, isPending: isActiveOrgPending } =
    useActiveOrganization();

  if (isActiveOrgPending) {
    return (
      <div className="p-4 border rounded-md space-y-2">
        <p>Loading active organization...</p>
        <Skeleton className="h-4 w-[200px]" />
        <Skeleton className="h-4 w-[150px]" />
      </div>
    );
  }

  if (!activeOrganization) {
    return (
      <div className="p-4 border border-red-200 bg-red-50 rounded-md">
        <p className="text-red-700">
          No active organization found or error during loading.
        </p>
      </div>
    );
  }

  return (
    <div className="p-4 border border-green-200 bg-green-50 rounded-md">
      <h3 className="text-lg font-semibold text-green-800">
        Active Organization Loaded:
      </h3>
      <pre className="mt-2 text-sm text-green-700 bg-green-100 p-2 rounded">
        {JSON.stringify(activeOrganization, null, 2)}
      </pre>
    </div>
  );
}

2 replies

Gaming

Programming