-
-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can't perform a React state update on a component that hasn't mounted yet #5026
Comments
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'm seeing this exact same issue today. |
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 |
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 So if you set |
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 |
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. |
This also happens on |
same issue in getFacetedUniqueValues |
also facing the same |
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 :
|
Using latest version of tanstack @ 8.11.6, getting this when calling {
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 |
Describe the bug
Error received when navigating to a table using
getGroupedRowModel()
such as: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
Expected behavior
No error output
How often does this bug happen?
Every time
Screenshots or Videos
tanstack-table-unmounted.mov
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
The text was updated successfully, but these errors were encountered: