Hydration Issue with client component inside server comp
Answered
Samir posted this in #help-forum
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
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
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
what's the error?
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
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](https://cdn.discordapp.com/avatars/678259999201427466/1936f7e8963ff0f800f5eb4b43bc833c.webp?size=256)
Clown
Thats a error in your server component
You probably forgot to close a div tag
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
SamirOP
i tried removing it and it was working fine
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/1936f7e8963ff0f800f5eb4b43bc833c.webp?size=256)
Clown
Or some othrr tag
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
SamirOP
nope everything's fine
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/1936f7e8963ff0f800f5eb4b43bc833c.webp?size=256)
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](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
SamirOP
um lemme check again
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
SamirOP
not sure from where that issue coming
any way to debug it deeper?
![Image](https://cdn.discordapp.com/attachments/1157347439443980318/1157351519348338778/image.png?ex=65184b18&is=6516f998&hm=d5e892bb91625f9a4f90e23459df238b82846446083b1d0a19bb2ec644c8e87a&)
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
share server component code
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
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](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
what about the component you're importing the button in?
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
SamirOP
thats a page
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
have you been able to isolate where exactly the hydration issue occurs?
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
SamirOP
nope
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
if you comment out the button from this page, does everything work as normal?
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
SamirOP
yup
with button it works normally
but on refresh
hydration error
3 times
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
and the error is a matching div in div? share the code of the component that you import the button to
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
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](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
SamirOP
okay
still the issue
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
okay. try removing this div around the button
<div className="mt-auto">
<LikeButton hasUser={props.post.hasUser} />
</div>
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
SamirOP
same issue
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
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](https://cdn.discordapp.com/avatars/678259999201427466/1936f7e8963ff0f800f5eb4b43bc833c.webp?size=256)
Clown
Ok so this might sound dumb but can you check if that async mapping you are doing is causing the issue?
Answer
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/1936f7e8963ff0f800f5eb4b43bc833c.webp?size=256)
Clown
On line 94
Just try manually adding a post for testing purposes and do the await stuff outside the return statement
![Avatar](https://cdn.discordapp.com/avatars/1084674120182153216/3f307116ecc7d25b46a1fd5255914a4d.webp?size=256)
SamirOP
sure lemme chekc
oh yeah
error gone
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/1936f7e8963ff0f800f5eb4b43bc833c.webp?size=256)
Clown
![:derp:](https://cdn.discordapp.com/emojis/1133125169561473104.png)
Fix that up ig.
And then mark the answer once you have confirmed everything works