Best way to use checkbox table
I have a global table component with react table checkboxes (child component). I want to use it on a page (parent component) and save the selectedFlatRows in the parent state.
this is how I update the state from my table component
useEffect(() => {
if(selectedFlatRows && selectedFlatRows.length) onSelectChange(selectedFlatRows.map(row => row.original))
}, [selectedFlatRows]);
But when a parent state changes, the table rerenders too. And it's going to reset the selection.
Is there a way to use the checkbox table from the child component and save it to the parent state without reset? I have tried react memo but it's not working
2 Replies
vicious-gold•3y ago
I am also facing the same issue
unwilling-turquoise•3y ago
You’ll need to provide a codesandbox to allow for some debugging.
But already I can see the useEffect is your issue here. This hook is only for syncing up state, not applying new state whose reference can change.
Basically treat useEffect like an auto sync function that could run at any time without you knowing.
The onSelectChange trigger I imagine is coming from an onClick handler? If so, that function should be handled separately, outside of a useEffect.