[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

[CapablancaYEHA]

@sergiomilici Thank you very much for your reply. I declared everything for components prop outside main component, with context. But with that it is impossible to make similar for fixedHeaderContent and itemContent props, only inside main component body, additionally you can wrap them with useCalback, and after that i figured that [rows] for dependancy array is for sure obligatory - and it is the main reason of re-renders. It is possible to provide deep equality check for rows, like with JSON.stringify or toString() from lodash - then re-renders are gone, but after that rows and cells in table are mismatched, have wrong dimensions, positions, etc.

So it seems like a bummer.

If you managed to find a workaround for itemContent, fixedHeaderContent and their re-renders (based on rows change or not) - please provide full code or complete sandbox

[petyosi]

The itemContent also has access to the context. The fixedHeaderContent however, does not. I'm not sure if keeping it inline won't work though - the container components and the itemContent are more problematic in general.

[sergiomilici]

One option you can do for fixedHeaderContent is to declared it inside the component you use it using useCallback without passing any deps. To access the deps you need inside, you can create a ref outside and set all the props you need, and inside the component just get them from the ref.

const headerContentProps = {
   rows,
   somethingElse,
};
const headerContentRef = useRef(headerContentProps)
headerContentRef.current=headerContentProps

const fixedHeaderContent = useCallback(()=>{
    const {rows}= headerContentProps.current
    return <div>header rows lenght: {rows.length}</>
},[])

[CapablancaYEHA]

The only problem is when Cell components have some dropdown openable list. Then, when user interacts and re-render occurs those dropdowns close.

I dont think that worth reproducing in sandbox. Better - do you have you own installment of virtualised table that you are satisfied with ? If so, can you please tell me, how many re-renders occurs there locally for you. Cause in my expirience Table is fully initialised and stable with received data for 3-4 seconds, then 1 re-render occurs and another one after additional ~1sec

[sergiomilici]

I had a similar issue with an input losing focus, and it wasn't the rendering. The issue was that the component was unmounted and mounted again. Check if that's what's happening first.
I can't share the code. My issue was because the components weren't the same, so I fixed like the official documentation says.

Try to make sure that the rendering is the issue, maybe creating a new isolated component outside the table and updating the state (create a new react app for testing it), just to be sure that the issue is/is not on the dropdown.

[CapablancaYEHA]

All items in <Virtuoso components={{ ... }} are made by guide, and declared outside of component.
And is seems that even after that - this is re-mount of those components passed to components={} , and i cannot get rid of that

[sergiomilici]

I can't help you more without some code to look. Try deleting things, make everything as simple as possible to see what's causing the issue, remove part by part until you see when the error is not happening.

[CapablancaYEHA]

ok, understood, thank you very much!