Why is my component logging continuously by using mobx & react-table #5563
-
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. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
An educated guess: Maybe because you are setting data as 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 |
Beta Was this translation helpful? Give feedback.
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 usinguseMemo
.