Next.js Discord

Discord Forum

Hydration killing me

Unanswered
Billy posted this in #help-forum
Open in Discord
BillyOP
always encounter hydration

the components

// "use client";
import React from "react";
import Button from "../button-with-link";
import { Edit, Trash } from "lucide-react";
import { getAllUsers } from "@/lib/actions";

export default async function UsersData() {
  const users = await getAllUsers();

  const data = users?.data?.data?.map((user: IUser) => (
    <tr key={user?.id} className="divide-x">
      <td className="py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        {user?.id}
      </td>
      <td className="py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        {user?.fullName}
      </td>
      <td className="py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        {user?.email}
      </td>
      <td className="py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        {user?.address}
      </td>
      <td className="py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        {user?.country}
      </td>
      <td className=" flex gap-2 py-2 px-4 whitespace-nowrap text-sm font-medium text-gray-500 ">
        <Button size="xs" variant="info" width="fit">
          <Edit size={15} />
        </Button>
        <Button size="xs" variant="danger" width="fit">
          <Trash size={15} />
        </Button>
      </td>
    </tr>
  ));
  return <>{data}</>;
}

9 Replies

Asian black bear
Additionally, the error clearly tells you that have incorrect nesting somewhere in your markup that you have to fix.
Sun bear
you are doing something wrong if you are chaining ? everytime you are accessing nested objects
users?.data?.data?.map
user?.id
user?.fullName
user?.address
etc.
@Sun bear you are doing something wrong if you are chaining ? everytime you are accessing nested objects
Asian black bear
Depending on the structure of the data it can be fine. Also, this is unrelated to OPs issue
@Asian black bear Depending on the structure of the data it can be fine. Also, this is unrelated to OPs issue
Sun bear
My bad, but I felt it was worth mentioning it. If the users.data.data is undefined there should be some kind of handling
joulev
I have to spam ?. all the time when working with graphql though, it depends a lot on the data source
of course if the data source doesn't intend it to be nullable by default then spamming ?. is pretty questionable
Southern African anchovy
Honestly at first hydration issues were killing me too until I realized I had html/jsx problems and it was not NextJS fault :kekw2:
Just take time to read the error message, friend 👍