Why is my component logging continuously by using mobx & react-table

[wq758511990]

here is a super easy demo

import { makeAutoObservable } from "mobx";

class IndexStore {
  _count = 0;

  constructor() {
    makeAutoObservable(this);
  }


  get count() {
    return this._count;
  }

  add() {
    this._count++;
  }
}

export default new IndexStore();

import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { observer } from "mobx-react-lite";
import store from "./store";

const App = observer(() => {
  const { count } = store;

  const table = useReactTable({
    data: [],
    columns: [],
    getCoreRowModel: getCoreRowModel(),
  });

  console.log("store", table.getRowModel());
  return (
    <div>
      {count}
      <button
        onClick={() => {
          store.add();
        }}
      >
        +++
      </button>
      <div>{store.count}</div>
    </div>
  );
});

export default App;

After I click the "+++" button, it's logging and logging, if I delete the log line, it behaves normally, any one knows why？I couldn't find an answer anywhere else.

[jgarplind]

An educated guess: Maybe because you are setting data as [] every time.

An empty array is not equal to another empty array, so React sees something has changed and re-renders, causing the same thing to happen time and time again.

The docs are pretty clear that you should have a stable reference to data, which you can get by bringing it from outside the component, or by using useMemo.

[KevinVandy]

yep: https://tanstack.com/table/latest/docs/guide/data#give-data-a-stable-reference

and: https://tanstack.com/table/latest/docs/faq#how-do-i-stop-infinite-rendering-loops

[wq758511990]

That works. Thanks a lot