React-Table re-renders entire table on select

Question

I have a relatively standard react-table with rows that can be selected- implemented using the HOC SelectTable, much like the example react-table provides:

https://github.com/tannerlinsley/react-table/blob/v6/docs/src/examples/selecttable/index.js

The key difference being one of my columns is a custom component:

 const columns = [
      {
      ...other columns...
      {
        Header: "Sound file",
        accessor: "sound_file",
        Cell: props => {
          return <SoundFilePlayer url={props.row.sound_file_url} />;
        },

        minWidth: 80
      }
    ];

With the SoundFilePlayer component being a react-player component that plays the sound file passed into the component as a prop. Essentially it loads the URL passed in and renders a sound player:

Before loading the url (with duration defaulting to 0:00)

Then rendering with correct duration once loaded:

The problem I'm facing is that whenever a row is selected in my table the entire table re-renders (which would be okay if there wasn't a sound player)- meaning the sound file player is reset back to 0:00 duration and then re-loaded once more with the correct duration. And this happens for every row.

My guess is that all the row's keys are checked to see if they are currently selected leading to a re-render of the entire table.

Is there anyway I only re-render only the selected row- as opposed to the entire table? I've looked at https://reactjs.org/docs/state-and-lifecycle.html as well as a few other SO posts but can't seem to only re-render the row affected. Or even just re-render the column with the checkbox?

Answer 1

So I eventually found a solution - simply downgrading my react-table version, specifically to 6.8.6 fixed the issue.

It seems like a bug was introduced in later versions (which I doubt will be fixed, given that the attention is on version 7 now).

Answer 2

You can try memoizing the component with useMemo hook like this

const file = React.useMemo(() => <SoundFilePlayer url={props.row.sound_file_url} />, [props.row.sound_file_url]);

It will won't recreate components function and will take it from memory unless file url changes.