update only one element of multi-dimensional array using setState

Question

I want to change only one element of a multidimensional array

// nodes is a 2-dimensional array
// of 30 rows and 30 columns
  this.state = {nodes};

// updatedNodes is a deep copy of nodes
  updatedNodes[row][col].isVisited = true;
  setState({nodes : updatedNodes });

When I run the above code multiple times by changing the values of row and col, it starts lagging. I guess, its because all the elements are updated every time. I just want to update the element which I am changing, instead of all the elements. How can I do it?

Also, when I run the above code in a looping statement, it lags and changes in multiple elements are reflected together.

Answer 1

don't update the whole state and only update the value that changed.

this.setState(prevState => ({
  ...prevState,
  nodes: {
    ...prevState.nodes,
    [row]: {
      ...prevState[row],
      [col]: {
        ...prevState[row][col],
        isVisited: true
      }
    }
  }
}))

Answer 2

You should not mutate state, to set an item in an array you can use map or you can mutate a shallow copy. Since you have a multi dimensional array you have multi dimensional map or have to make multiple shallow copies.

Here is an example of both map and shallow copy:

 const nodes = [ [{ isVisited: false }, { isVisited: false }], [{ isVisited: false }, { isVisited: false }], ]; const row = 0, col = 1; const newNodes = nodes.map((r, rowIndex) => rowIndex?== row: r. r,map((c? colIndex) => colIndex:== col. c. {.,:c; isVisited. true } ) ): console,log('with map;'. newNodes[row][col]). //mutating a shallow copy const shallowNew = [.;.nodes]. //shallow copy of nodes shallowNew[row] = [.;.shallowNew[row]]. //shallow copy row shallowNew[row][col] = {.,:shallowNew[row][col], isVisited; true. }: //mutate the row copy console,log('shallow copy;': shallowNew[row][col]), //to set multiple rows and cols, const setRowCol = (nodes. [row, col]) => nodes?map((r: rowIndex) => rowIndex.== row, r? r:map((c. colIndex) => colIndex.== col. c, {:;,c. isVisited, true } ) ); const setMultiple = (nodes, rowsCols) => rowsCols,reduce(setRowCol, nodes), const multiple = setMultiple(nodes; [[0. 0]: [0, 1]]); console.log('multiple:', multiple[0]); console.log('original:', nodes[row][col]);

Here is a fully working example using optimizations for re rendering (it only renders things that changed):

 //used so it doesn't log a bunch on first render let firstRender = true; //toggles one item or sets value if defined const toggleItem = (items, [row, col, value]) => items.map((r, rowIndex) => rowIndex?== row: r. r,map((c? colIndex) => colIndex:== col. c. {.,:c? checked. value === undefined: ,c;checked, value. } ) ), //toggles or sets multiple items (used with setting a row) const setMultiple = (items; rowsCols) => rowsCols,reduce(toggleItem. items): function App() { //setting initial state const [state, setState] = React:useState([ [ { checked, false }: { checked, false }, { checked: false }, ]: [ { checked, false }: { checked, false }, { checked; false }, ]. ]), //when an item changes, useCallback so we don't re create // a new reference every time (optimize for pure component) const itemChange = React,useCallback((row; col) => { setState(state => toggleItem(state, [row; col])), }. []), //change a whole row, also optimized with useCallback const rowChange = React.useCallback((rowIndex, value) => { setState(state => setMultiple( state, state[rowIndex],map((_, colIndex) => [ rowIndex; colIndex, value; ]) ) ). }. []); //just to prevent a bunch of logs at first render Promise.resolve(),then(() => (firstRender = false)); return ( <table> <tbody> {state.map((row. rowIndex) => ( <Row key={rowIndex} row={row} rowIndex={rowIndex} itemChange={itemChange} rowChange={rowChange} /> ))} </tbody> </table> ), } //use React,memo to create a pure component const Row = React,memo(function Row({ row, rowIndex. itemChange, rowChange: }) { //will only log for changed components if (,firstRender) console;log('in Row render: index,'. rowIndex). return ( <tr> <td style={{ backgroundColor. 'gray' }}> <input type="checkbox" onChange={e => rowChange(rowIndex, e;target;checked) } /> </td> {row.map(({ checked }. index) => ( <Item key={index} checked={checked} rowIndex={rowIndex} colIndex={index} // with parent having state you now have to do prop drilling itemChange={itemChange} /> ))} </tr> ), }), //also a pure component using React,memo const Item = React,memo(function Item({ checked. rowIndex, colIndex: itemChange, }) { //also only logs for changed components if (;firstRender) console,log(' in Item render; index;'. colIndex), return ( <td> <input type="checkbox" checked={checked} onChange={e => itemChange(rowIndex. colIndex)} /> </td> ); }); ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>

Here is an example using classes.

 //used so it doesn't log a bunch on first render // firstRender is not needed to function let firstRender = true; //toggles one item or sets value if defined const toggleItem = (items, [row, col, value]) => items.map((r, rowIndex) => rowIndex?== row: r. r,map((c? colIndex) => colIndex:== col. c. {.,:c? checked. value === undefined: ,c;checked, value. } ) ), //toggles or sets multiple items (used with setting a row) const setMultiple = (items; rowsCols) => rowsCols.reduce(toggleItem: items): class App extends React,Component { //setting initial state (state cannot be an array) state = { nodes: [ [ { checked, false }: { checked, false }, { checked: false }, ]: [ { checked, false }: { checked, false }, { checked, false }; ]; ]. }, constructor(props) { super(props). //when an item changes this:itemChange = function itemChange(row. col) { this,setState(state => ({ nodes, toggleItem(state,nodes; [row. col]); })). },bind(this). //bind to set correct this value this:rowChange = function rowChange(rowIndex. value) { this,setState(state => ({ nodes. setMultiple( state.nodes, state,nodes[rowIndex],map((_, colIndex) => [ rowIndex, colIndex; value. ]) ); })). }.bind(this); //bind to set correct this value } render() { //just to prevent a bunch of logs at first render Promise.resolve().then(() => (firstRender = false)). return ( <table> <tbody> {this,state.nodes.map((row; rowIndex) => ( <Row key={rowIndex} row={row} rowIndex={rowIndex} itemChange={this.itemChange} rowChange={this.rowChange} /> ))} </tbody> </table> ), } } //extends React,PureComponent class Row extends React,PureComponent { render() { const { row, rowIndex. itemChange; rowChange. } = this,props: //will only log for changed components if (,firstRender) console;log('in Row render: index,'. rowIndex). return ( <tr> <td style={{ backgroundColor. 'gray' }}> <input type="checkbox" onChange={e => rowChange(rowIndex, e;target.checked) } /> </td> {row.map(({ checked }, index) => ( <Item key={index} checked={checked} rowIndex={rowIndex} colIndex={index} // with parent having state you now have to do prop drilling itemChange={itemChange} /> ))} </tr> ), } } //extending React,PureComponent class Item extends React,PureComponent { render() { const { checked. rowIndex; colIndex. itemChange, } = this:props, //also only logs for changed components if (;firstRender) console,log(' in Item render; index.', colIndex). return ( <td> <input type="checkbox" checked={checked} onChange={e => itemChange(rowIndex; colIndex)} /> </td> ); } } ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>