Infinite re-render when using useQuery() select and useReactTable()

[yiqingfann]

Hi! I'm building a simple table:

• I fetch data with react-query and use select to transform the result
• I render data with react-table

However I ran into a problem when I:

1. run the code below (react v19.0.0, react-query v5.69.0, react-table v8.21.2)
2. click "increase count" button
3. the component infinitely re-renders

My hypothesis is:

• react-table requires data to be a stable reference (link)
• react-query inline select runs on every render (link)
• so the infinite loop make sense because:
  1. render 1: select returns a new array, table think data changed and triggers a new render
  2. render 2: select returns a new array, table think data changed and triggers a new render
  3. ...infinite re-render

However, one surprising observation is that if I change date: new Date("2025-03-19") to date: new Date("2025-03-19").getTime(), the above steps won't result in infinite re-render any more.

This breaks my hypothesis above and I can't explain why one causes infinite re-render and one doesn't.

Does anyone have an idea why?

import { useQuery } from "@tanstack/react-query";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useState } from "react";

const columns = [
  {
    id: "name",
    accessorKey: "name",
  },
  {
    id: "date",
    accessorKey: "date",
  },
];

const emptyData: any[] = [];

export default function App() {
  console.log("---render");

  const [count, setCount] = useState(0);

  const query = useQuery({
    queryKey: ["test"],
    queryFn: async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      return [];
    },
    select: () => {
      return [
        {
          name: "hello",

          // this causes infinite re-render
          date: new Date("2025-03-19"),

          // // this doesn't cause infinite re-render
          // date: new Date("2025-03-19").getTime(),
        },
      ];
    },
  });

  const table = useReactTable({
    data: query.data ?? emptyData,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  if (query.isLoading) {
    return <div>Loading...</div>;
  }

  if (query.isError) {
    return <div>Error</div>;
  }

  return (
    <div>
      <button onClick={() => setCount((prev) => prev + 1)}>
        increase count
      </button>

      {table.getRowModel().rows.map((row) => (
        <div key={row.id}>{JSON.stringify(row.original.date)}</div>
      ))}
    </div>
  );
}

[TkDodo]

we perform structural sharing on the result of the queryFn and the result of select. So even if select runs on every render, we keep the references stable if nothing changed. Dates can’t be compared though, so it will yield a new reference. You’d need to memoize select with useCallback for that.

.getTime() returns a primitive so it’ll work again. structural sharing is turned on per default, but only works for json serializable things.

[yiqingfann]

Ahh good to know about the structural sharing behavior. That explains why Date causes the select return to be unstable. Thanks!