When using react table we usually I'm often thrown off by the constant un- und mounting of the cell components. Here is an example (sandbox):
const data = [{ name: "Lukas" }];
export default function App() {
const [count, setCount] = useState(0);
const columns = useMemo(() => {
return [
{
Header: "name",
accesspor: "name",
Cell: (props) => {
useEffect(() => () => console.log("unmount"), []);
return (
<div>
{props.value} + {count}
</div>
);
}
}
];
}, [count]);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({ data, columns });
return (
<div className="App">
<button onClick={() => setCount((c) => c + 1)}>increment</button>
<div>
<table {...getTableProps()}>
...render the table
</table>
</div>
</div>
);
}
The column array depends on count. If we increment count, all cells are fully unmounted. I've tried adding key props to signal a stable entity - but found no way to prevent unmounting.
Why I this unmounting problematic? In case nested components reliy on state, the state is fully reset on unmount.
Is there any way to prevent Cell components from being unmounted?