Hydration Issue with client component inside server comp
Answered
Samir posted this in #help-forum
SamirOP
I'm using this button into my server component but somehow it gives me hydration error. Can someone tell me why?
My code
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?
46 Replies
what's the error?
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
Thats a error in your server component
You probably forgot to close a div tag
SamirOP
i tried removing it and it was working fine
Or some othrr tag
SamirOP
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
SamirOP
um lemme check again
share server component code
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.tsxwhat about the component you're importing the button in?
SamirOP
thats a page
have you been able to isolate where exactly the hydration issue occurs?
SamirOP
nope
if you comment out the button from this page, does everything work as normal?
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
SamirOP
okay
still the issue
okay. try removing this div around the button
<div className="mt-auto">
<LikeButton hasUser={props.post.hasUser} />
</div>SamirOP
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
