title: Performance issue with big React state object
body: <p>I have a function <code>updateRowValue</code>, which updates a value in a row in a table based on user input. There are 11 columns whose values can be updated by the user, and the user can add/remove rows. I am currently testing on a table with 7 rows, and there is a severe lag between pressing a key on the keyboard and the change appearing on the screen.</p>
  <p>Each time the user presses a key on their keyboard, the state is updated (I am using a controlled MUI TextField). I don't think the amount of inputs is the actual problem (though I might be wrong). I think the problem is that I have to traverse through the <code>table_rows</code> object every time a value should be updated.</p>
  <p>My question is basically: Can I update the value each time the user presses a key on their keyboard and also make the app feel responsive to the key presses? If so, then how?</p>
  <pre><code>function updateRowValue(row_id, attribute, new_value){
      const new_row = Object.assign(table_rows[row_id], {[attribute]: new_value});
      const newState = Object.assign(table_rows, { [row_id]: {...table_rows[row_id], ...new_row} });
  
      setTableRows({...table_rows, ...newState});
  }
  </code></pre>