Next.js Discord

Discord Forum

Hydration Issue with client component inside server comp

Answered
Samir posted this in #help-forum
Open in Discord
Avatar
SamirOP
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

Avatar
Dayo
what's the error?
Avatar
SamirOP
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
Avatar
Clown
Thats a error in your server component
You probably forgot to close a div tag
Avatar
SamirOP
i tried removing it and it was working fine
Avatar
Clown
Or some othrr tag
Avatar
SamirOP
nope everything's fine
Avatar
Clown
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
Avatar
SamirOP
um lemme check again
Avatar
SamirOP
not sure from where that issue coming
any way to debug it deeper?
Image
Avatar
Dayo
share server component code
Avatar
SamirOP
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
Avatar
Dayo
what about the component you're importing the button in?
Avatar
SamirOP
thats a page
Avatar
Dayo
have you been able to isolate where exactly the hydration issue occurs?
Avatar
SamirOP
nope
Avatar
Dayo
if you comment out the button from this page, does everything work as normal?
Avatar
SamirOP
yup
with button it works normally
but on refresh
hydration error
3 times
Avatar
Dayo
and the error is a matching div in div? share the code of the component that you import the button to
Avatar
SamirOP
https://hastebin.com/share/utacoluqak.typescript
Avatar
Dayo
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
Avatar
SamirOP
okay
still the issue
Avatar
Dayo
okay. try removing this div around the button

<div className="mt-auto">
            <LikeButton hasUser={props.post.hasUser} />
          </div>
Avatar
SamirOP
same issue
Avatar
Dayo
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
Avatar
Clown
Ok so this might sound dumb but can you check if that async mapping you are doing is causing the issue?
Answer
Avatar
Clown
On line 94
Just try manually adding a post for testing purposes and do the await stuff outside the return statement
Avatar
SamirOP
sure lemme chekc
oh yeah
error gone
Avatar
Clown
:derp:
Fix that up ig.
And then mark the answer once you have confirmed everything works