Open
Description
in this link
https://tanstack.com/table/latest/docs/faq#pitfall-2-mutating-columns-or-data-in-place
export default function MyComponent() {
//✅ GOOD
const columns = useMemo(() => [
// ...
], []);
//✅ GOOD (React Query provides stable references to data automatically)
const { data, isLoading } = useQuery({
//...
});
const table = useReactTable({
columns,
//❌ BAD: This will cause an infinite loop of re-renders because `data` is mutated in place (destroys stable reference)
data: data?.filter(d => d.isActive) ?? [],
});
return <table>...</table>;
Though it still cause infinite loop,
i find the statement is slightly incorrect since the .filter is not mutating the data,
in fact the data.filter is returning new array reference, not mutating it,
if it were mutated, it also wont change the array reference anway...
I think could have minor fix on that doc part
Metadata
Assignees
Labels
No labels