Next.js Discord

Discord Forum

Hydration Issue with client component inside server comp

Answered
Samir posted this in #help-forum
Open in Discord
I'm using this button into my server component but somehow it gives me hydration error. Can someone tell me why?

My code
"use client";

import { useEffect, useState } from "react";
import { Heart } from "lucide-react";

const LikeButton: React.FC<{ hasUser: boolean }> = (props) => {
  const [isPostLiked, setIsPostLiked] = useState(false);

  useEffect(() => {
    setIsPostLiked(props.hasUser);
  }, []);

  return (
    <button
      className={`inline-flex items-center gap-1 rounded-full px-2 py-1 border-2  ${
        isPostLiked ? "border-primary bg-primary/80" : " border-input"
      }`}
    >
      <span>Like</span>
      <Heart className="" size={20} />
    </button>
  );
};

export default LikeButton;
Answered by Clown
Ok so this might sound dumb but can you check if that async mapping you are doing is causing the issue?
View full answer

46 Replies

what's the error?
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <div>.
It only occurs because of that button
Thats a error in your server component
You probably forgot to close a div tag
i tried removing it and it was working fine
Or some othrr tag
nope everything's fine
It works fine without this component... thats weird... unless im going monkee brain i cant see a issue
Maybe try wrapping the button using #Unknown Channel or using a div
um lemme check again
not sure from where that issue coming
any way to debug it deeper?
@Samir any way to debug it deeper?
share server component code
import "./globals.css";

import { getUser } from "@/lib/supabase";

import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/toaster";
import Navbar from "@/components/navbar";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await getUser();

  return (
    <html lang="en" suppressHydrationWarning>
      <body className="flex flex-col items-center gap-3 h-screen">
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <Navbar user={{ ...user }} />

          {children}

          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  );
}
thats my layout.tsx
thats a page
@Samir thats a page
have you been able to isolate where exactly the hydration issue occurs?
nope
@Samir thats a page
if you comment out the button from this page, does everything work as normal?
yup
with button it works normally
but on refresh
hydration error
3 times
and the error is a matching div in div? share the code of the component that you import the button to
best guess is this div

{props.isReply ? (
            <div>{props.content}</div>
          ) : (
            <div>{parser.toHTML(props.content)}</div>
          )}
try removing it and see if you still get hydration errs
okay
still the issue
okay. try removing this div around the button

<div className="mt-auto">
            <LikeButton hasUser={props.post.hasUser} />
          </div>
same issue
if you remove the button entirely, do you still get the error?
if you do, then you have to keep trying to debug to isolate what part exactly is causing the error
Ok so this might sound dumb but can you check if that async mapping you are doing is causing the issue?
Answer
On line 94
Just try manually adding a post for testing purposes and do the await stuff outside the return statement
sure lemme chekc
oh yeah
error gone
:derp:
Fix that up ig.
And then mark the answer once you have confirmed everything works