multiple rendering useReactTable hook with nextjs14

TanStack Table version

8.16.0

Framework/Library version

^18

Describe the bug and the steps to reproduce it

hi there

i fetched data from TransactionTabel in nextjs 14 usring defualt rendreing SSR

// TransactionTabel.jsx component

import { columns } from "@/app/transactions/_component/columns";
import React from "react";
import { getTransactions } from "../data/transactionData";
import { RootTabel } from "./tabel/RootTabel";

export default async function TransactionTabel({page}) {

  const { transactions, error } = await getTransactions(page);

  if (!transactions) {
    return <p>{error}</p>;
  }

  return (
    <RootTabel
      columns={columns}
      data={transactions}
      page={page}
    />
  );
}

then passed data to RootTabel component

//RootTabel.jsx component


"use client";

import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import Link from "next/link";

export function RootTabel({ columns, data, page }) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  console.log("rendered");

  return (
    <>
      <div className="border rounded-md">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id}>
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </TableHead>
                  );
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="h-24 text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center justify-end py-4 space-x-2">
        <Link
          href={`transactions?page=${+page - 1}`}
          variant="outline"
          size="sm"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          Previous
        </Link>
        <Link
          href={`transactions?page=${+page + 1}`}
          variant="outline"
          size="sm"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          Next
        </Link>
      </div>
    </>
  );
}

but this component render multiple time some time 2, some time 3

why this happen

sandbox app/transactions/_component/tabel/RootTabel.jsx app/transactions//RootTabel.jsx

how i can fix it thank you for explaining and helping

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/github/d1d4r/expense-tracker/master?file=%2Fsrc%2Fapp%2Ftransactions%2F_component%2Ftabel%2FRootTabel.jsx&workspaceId=9d63e763-176b-4cfc-b16d-ba5abfabb303

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

TanStack / table

multiple rendering useReactTable hook with nextjs14 #5570