How can I prevent entire table from rerendering when using useRowState to manage row hover state?

[vdeantoni]

Hello,

I'm using useRowState to manage each row's hover state:

<tr
  {...row.getRowProps()}
  onMouseEnter={() => {
    row.setState((state) => ({ ...state, hover: true }));
  }}
  onMouseLeave={() => {
    row.setState((state) => ({ ...state, hover: false }));
  }}
>
...
</tr>

So I can use that when rendering the cell, for example:

{
  Header: "hover",
  accessor: "hover",
  Cell: ({ row: { state } }) => {
    return state.hover ? "yes" : "no";
  }
}

The problem is, every time one row is hovered (and thus row.setState called) the entire table is rerendered. That is not a huge issue with a couple dozens of rows, but when hundreds are on the screen it's very apparent.

I tried using useCallback to wrap the event handlers, but that didn't seem to make any difference, I'm not really sure what is actually triggering the rerenders.

I modified the Basic Example to illustrate my problem:

https://codesandbox.io/s/vigilant-cherry-2ecwh?file=/src/App.js:1334-1647

Any help would be greatly appreciated!

[gargroh]

Re-rendering is expected and cannot be avoided when setting row state, two solutions that i can think of for this problem - 1. Use css hover 2. Go with non-react way i.e. use dom apis to find all rows/cells in given table and do required op.

[vdeantoni]

I understand the row whose state changed being re-rendered, but the other rows that didn't change re-rendering I don't understand, is that by design?

[Kamino0]

Hey. Did you find a solution?

[vdeantoni]

I wouldn't say I found a solution for the general rerender issue, but I was able to use css classes that are only visible on row hover, and it worked fine for my specific use case.

[olegKusov]

Having same issue. The problem with CSS that it's can't be used if we using button with popup because popup will not be closed on mouseLeave after button hide.

[nynevi]

I extracted the Row and the Cell components into React components and wrapped them with React context and it is more performant now

[alvinlys]

would you mind to share yours in sandbox? thanks