Next.js Discord

Discord Forum

Hydration Issue with client component inside server comp

Answered
SamoCodes posted this in #help-forum
Open in Discord
Avatar
SamoCodesOP
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
Madeiran sardinella
what's the error?
Avatar
SamoCodesOP
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
SamoCodesOP
i tried removing it and it was working fine
Avatar
Clown
Or some othrr tag
Avatar
SamoCodesOP
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
SamoCodesOP
um lemme check again
Avatar
SamoCodesOP
not sure from where that issue coming
any way to debug it deeper?
Image
Avatar
Madeiran sardinella
share server component code
Avatar
SamoCodesOP
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
Madeiran sardinella
what about the component you're importing the button in?
Avatar
SamoCodesOP
thats a page
Avatar
Madeiran sardinella
have you been able to isolate where exactly the hydration issue occurs?
Avatar
SamoCodesOP
nope
Avatar
Madeiran sardinella
if you comment out the button from this page, does everything work as normal?
Avatar
SamoCodesOP
yup
with button it works normally
but on refresh
hydration error
3 times
Avatar
Madeiran sardinella
and the error is a matching div in div? share the code of the component that you import the button to
Avatar
SamoCodesOP
Avatar
Madeiran sardinella
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
SamoCodesOP
okay
still the issue
Avatar
Madeiran sardinella
okay. try removing this div around the button

<div className="mt-auto">
            <LikeButton hasUser={props.post.hasUser} />
          </div>
Avatar
SamoCodesOP
same issue
Avatar
Madeiran sardinella
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
SamoCodesOP
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