onChange event re-renders the Entire Table - reactjs

Question

I use react-table npm package and i store all the data required by the table in the state
componentDidMount() {
this.props.client
.query({
query: ALL_SKUS
})
.then(({ data }) => {
const skus = removeTypename(data.allSkuTypes);
const newData = skus.map((sku, index) => ({
serial: index + 1,
...sku
}));
this.setState({ data: newData });
})
.catch(err => {
console.log(err);
});
}
this is how the 'name' field of my column looks like
{
Header: 'SKU Name',
headerClassName: 'vt-table-header',
accessor: 'name',
maxWidth: 350,
Cell: this.renderEditable
},
where this is the event handler
renderEditable = ({ index, column }) => {
const { data } = this.state;
return (
<InputGroup
onChange={e => {
const newData = [...data];
newData[index][column.id] = e.target.value;
this.setState({ data: newData });
}}
value={data[index][column.id]}
/>
);
};
finally this is how all that data goes in the react table
<ReactTable
loading={data.length === 0 ? true : false}
showPagination={false}
className="mt-3 text-center"
data={data}
columns={columns}
/>
I have tried removing the value attribute from the Input and then added an onBlur to it while that solved the performance issue it was enable to fetch the data from the query initially.
I am also facing this issue in many complex forms in my application any help will be highly appreciated

Answer 1

Here is an idea.
instead of doing this, which provides a component InputGroup for your Cells in the table as I suppose:
renderEditable = ({ index, column }) => {
const { data } = this.state;
return (
<InputGroup
onChange={e => {
const newData = [...data];
newData[index][column.id] = e.target.value;
this.setState({ data: newData });
}}
value={data[index][column.id]}
/>
);
};
What about creating a separate component that controlls it's own state, instead of changing the whole table state for each cell change, why not have a component CELL which changes it's own state with any other possible POST requests ...etc.
This will narrow-down the rendering to Cell based instead of the whole Table gets rendered.
It will almost be the same:
class Cell extends React.Component {
state = { ...yourCellData }
componentDidMount() {
this.setState({ ...this.props.youCellData }); //any properties passed from the main component.
}
render(){
const { index, column } = this.props;
return (
<InputGroup
onChange={e => {
const newData = [...this.state.data];
newData[index][column.id] = e.target.value;
this.setState({ data: newData }); //this now modifies the Cell data instead of the whole table
}}
value={data[index][column.id]}
/>
);
}
}
Applicable possible as:
{
Header: 'SKU Name',
headerClassName: 'vt-table-header',
accessor: 'name',
maxWidth: 350,
Cell: (index, column) => <YourNewCellComponent index={index} column={column} />
},
I hope this somehow provides you of an overall of an approach that might solve the problem