[PROBLEM] virtuoso + react-table re-rendering

[CapablancaYEHA]

Hello!

I was trying to use this example
But i get re-mounts or re-renders after initial mount, my table has animations, so its clearly seen + in has form inside, so all the fields get reset.
Currently using 3.1.5 version, cause it doesnt have that strange flickering \ jumping bug when scrolling.

In other issues here on github, i found that you recommend to NOT declare components inline to prevent re-renders, in a manner of sandbox
But, i dont clearly understand.

1. How am i supposed to declare components separately, if i need a lot of react-table instance functions + my own props coming to and ?

    const TableRowComponent = ({ rows, view, handleRowClick, props }) => {
            const index = props["data-index"];
            const row = rows[index];
            return (
              <div
                {...props}
                {...row.getRowProps()}
                className={`tbody_tr ${view === "tabs" ? "tbody_tr--tab" : ""}`}
                onClick={() => {
                  handleRowClick(row, index);
                }}
              />
            );
         <TableVirtuoso
              ...
              components={{
              TableRow: (props) => (
                  <TableRowComponent
                    props={props}
                    view={view}
                    rows={rows}
                    handleRowClick={handleRowClick}
                  />
                ),
                ...

Please see this code-peace - is this sufficient and NOT considered inline?

2. Which components exactly i should declare to get rid of re-renders ?
   Everything that goes to components prop - Scroller, Table, TableRow, TableBody, TableHead, Filler ?

• for props: fixedHeaderContent, and itemContent ?
  So, ALL of them above should be NON-inline?

Cause i managed (as exampled above) to make components for itemContent, TableRow and Table and that WASN`T enough, i still got re-renders after initial mount.

Does someone have complete example of virtuoso+ react-table with NON inline declare of ALL components?
Or at least tell me where i am wrong in my 1* code example ?

[CapablancaYEHA]

I made another iteration - i wrote all components declarations inside my Table component

const TableRowComponent = useCallback(
    ({ ...props }) => {
      const index = props["data-index"];

      const row = rows[index];
      return (
        <div
          {...props}
          {...row.getRowProps?.()}
        />
      );
    },
    [rows],
  );

  const ItemComponent = useCallback(({ row }) => {
    return row.cells.map((cell) => {
      return (
     ...
      );
    });
  }, []);

  const TableComponent = useCallback(({ ...props }) => {
    return <div {...getTableProps()} {...props} className="table" />;
  }, []);

  const TableHusk = useCallback(
    ({ ...props }, ref) =>
        <div className="tbody" {...getTableBodyProps()} {...props} ref={ref} />
    [],
  );

  const TableBodyComponent = React.forwardRef(TableHusk);

then i assign those components to <Virtuoso
and that made no difference, TableComponent is the one that gets remounted constantly

ANyone has ideas ?

[sergiomilici]

Maybe this is a late response, but I had the same issue today.
Re-rendering will happen. To not lose the state of each row or header/footer you must not re-create new function for the components (prop).
In this case, TableRowComponent depends on rows which on change will produce a new TableRowComponent.

To fix it, create the components outside the rendering part of the table or any component and if you need to pass state data to them, use the virtuoso context.

const TableRowComponent = ({ context, ...props }) => {
  const value = context.anyOtherValue;
  const index = props['data-index'];
  const row = context.rows[index];
  return <div {...props} {...row.getRowProps?.()} />;
};


<TableVirtuoso
              context={{rows, anyOtherValue}}
              components={{
              TableRow: TableRowComponent
                }}
                ...
/>

You can see more info here