Calling row.toggleExpanded(bool) triggers re-render even without state change #6136
Description
TanStack Table version
8.21.3
Framework/Library version
"react": "19.2.1",
Describe the bug and the steps to reproduce it
I experienced a tiny freeze when tab-navigating between inputs with tab. This was in the onBlur handler:
if (newValue == "") row.toggleExpanded(false)
else row.toggleExpanded(true)
I suspected it was re-rendering freeze, which I later confirmed too. The solution was to add an additional check
if (newValue == "") row.getIsExpanded() && row.toggleExpanded(false)
else !row.getIsExpanded() && row.toggleExpanded(true)
And I realized that when the state is false, setting row.toggleExpanded(false) would not produce a changed UI, but it would still re-render the whole table.
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
code provided below
Screenshots or Videos (Optional)
export const columns = [
{
accessorKey: "priceSuggestion",
header: "Price Suggestion",
id: "priceSuggestion",
cell: ({ row }) => {
const priceSuggestion = row.original.priceSuggestion
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formData = new FormData(e.currentTarget)
const newValue = formData.get("priceSuggestion")
if (newValue == "" || newValue == priceSuggestion) row.getIsExpanded() && row.toggleExpanded(false)
else !row.getIsExpanded() && row.toggleExpanded(true)
}
return (
<form
onSubmit={handleSubmit}
onBlur={handleSubmit}
>
<Input
type="number"
step="0.01"
defaultValue={priceSuggestion}
placeholder={priceSuggestion}
name="priceSuggestion"
tabIndex={1}
/>
</form>
)
},
},
Do you intend to try to help solve this bug with your own PR?
No, because I do not have time to dig into it
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- 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.