table
table copied to clipboard
TanStack
Can't perform a React state update on a component that hasn't mounted yet
Describe the bug
Error received when navigating to a table using getGroupedRowModel() such as:
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getGroupedRowModel: getGroupedRowModel(),
});
As seen in this example, navigating to the basic table works fine where as navigating to the grouped table produces an error in the console. The only difference between the two is getGroupedRowModel().
I am using the code from the examples pretty much as is (stripped down for simplicity).
Your minimal, reproducible example
https://github.com/tacomanator/tanstack-table-unmounted
Steps to reproduce
- Clone example, install dependencies, and run
- While viewing the console, navigate to the grouped table
- Observe error
Expected behavior
No error output
How often does this bug happen?
Every time
Screenshots or Videos
https://github.com/TanStack/table/assets/63794/30edbbcf-8f7e-459f-b624-b7d82aac3f0a
Platform
macOS, Chrome 115.0.5790.170 arm64
react-table version
8.9.3
TypeScript version
5.1.6
Additional context
No response
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.
I am having the same problem in version 8.9.1 when I call table.getRowModel() to conditionally render rows in tbody and I can confirm that it probably has something to do with getGroupedRowModel.
If i remove getGroupedRowModel: getGroupedRowModel() from the hook the error disappears.
I investigated this issue this morning and discovered that the error only occurs when in dev mode. Same with @tacomanator's example. When I run the example in dev mode I get the error, but if I do a npm run build and npm start then the error disappears.
I think this is due to the fact that these errors don't show up in production builds but still happen.
Happy to be proven wrong.
I think it has something to do with pagination. When you add getGroupedRowModel it ends up calling setPagination in the render and that ends up calling setState.
So if you set onPaginationChange in the useReactTable definition to onPaginationChange: () => undefined then the error also goes away.
I think this is due to the fact that these errors don't show up in production builds but still happen.
It's possible that it's a dev-only error because of React's strict mode which will double renders and effects. For me it's happens only on the second round of the very first render.
It's likely that there's a internal hook that's using useState in an useEffect for memoization. setState is called after the render but the component will already be unmounted in dev mode.
This occurs here and exclusively in the context when the getGroupedRowModel function is utilized. It can be resolved by simply verifying whether the component is mounted before call setState in onStateChange. It seems somewhat hacky but can be helpful.
same issue in getFacetedUniqueValues
Same here, is there any other solution?
I faced a similar issue. in my case, the affected functionality is due to function getSortedRowModel() from checking "isEmpty" of my data which this caused the error , my temporary solution is :
getSortedRowModel: !data.isEmpty ? getSortedRowModel() : null
Using latest version of tanstack @ 8.11.6, getting this when calling table.getIsAllRowsSelected() in dev mode. I can confirm this still errors when strict mode is off.
{
id: "select-col",
enableResizing: false,
enableSorting: false,
header: ({ table }) => (
<div className="flex h-full w-full items-center justify-center">
<input
type="checkbox"
className="rounded-sm bg-neutral-500 text-orange-600 focus:ring-0 focus:ring-offset-0"
id="checkbox"
checked={table.getIsAllRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()}
/>
</div>
),
});
}
Temporary fix is to move the header component key into the actual rendering of the table and use an early check on the number of selected elements.
if (header.id === "select-col") {
return (
<div
key={header.id}
className="sticky left-0 top-0 z-20 border border-gray-600 bg-neutral-900 px-2.5 py-1.5"
>
<div className="flex h-full w-full items-center justify-center">
<input
type="checkbox"
className="rounded-sm bg-neutral-500 text-orange-600 focus:ring-0 focus:ring-offset-0"
id="checkbox"
checked={!!Object.keys(rowSelection) ? table.getIsAllRowsSelected() : false}
onChange={table.getToggleAllRowsSelectedHandler()}
/>
</div>
</div>
);
}
I receive this when using getRowModel but not when using any of the other getRow functions. Figure it's something getRowModel does during render.
With me this error occurred in 8.20.1 as well, in table.getColumn(<COLUMN_ID>) in the Toolbar component, while passing column prop, and updating the DataTableFacetedFilter shadcn-ui component.
Which is absolutely expected behavior when passing mutable props.
Updating column prop via useState hook, solved the problem.
const [statusCol, setStatusCol] = useState(null);
useEffect(() => {
if (table.getAllColumns().length) {
setStatusCol(table.getColumn('status'));
}
}, [table.getAllColumns().length]);
// then
{statusCol && (
<DataTableFacetedFilter
column={statusCol}
// ...
/>
)}
I receive this error as well. For now I disable getGroupedRowModel and the error is gone.
