React table cell unmounts?

Viewed 94

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?

0 Answers
Related