Updating props not updating table data
Hey all,
I have a bit of a problem. When I am passing data as a prop from a parent component to my useReactTable hook the initial render is fine.
However when the prop data changes the data within the table context remains the same.
What am I doing incorrectly?
I can see that the data prop is indeed showing the updated data but the table.getRowModel().rows still shows the old data
2 Replies
other-emerald•13mo ago
i have the same issue but with Vue adapter
optimistic-gold•13mo ago
So you’re passing a data prop down to your child component, which is responsible for rendering your table?
The data prop contains an object. The prop is referencing the same object even when the internal data changes, so no change is detected and therefore no re-render will occur. This is standard React behaviour.
The question is now how are you managing your data, is it coming from a backend request, what are you using to fetch that data, etc?
Aside from your specific scenario, the most straightforward way to fix this is to handle your data within your table component. If it’s being fetched from a db somewhere, try to use an intelligent fetching lib like tanstack query. This will handle, caching, refetching, error handling, etc. for you.
Use the data object provided by the useQuery hook from Tanstack Query.
This should alleviate your rendering issues.