title: How to structure this editable table in React
body: <p>I'm trying to implement a table with the following features:</p>
  <ul>
  <li>The table will have hundreds of rows</li>
  <li>Each row can be selected/checked</li>
  <li>Each row has a 'note' (pops up a modal to edit the note)</li>
  <li>The table will have a 'select all' button to check all the rows</li>
  <li>Rows can be added/removed</li>
  </ul>
  <p>My initial attempt was to structure the table like this (heavily pseudocoded to be concise):</p>
  <pre><code>let [rows, setRows] = useState(&quot;rows from an api&quot;);
  let [showModal, setShowModal] = useState(false);
  
  const checkAllRows = () =&gt; {
    let stateRows = rows;
    stateRows.map(row =&gt; row.checked = true);
    setRows(stateRows);
  }
  
  const checkRow = (rowId) =&gt; {
    let thisRow = rows.find(row =&gt; row.rowId === rowId);
    thisRow.checked = true;
  }
  
  &lt;button onClick={() =&gt; checkAllRows} /&gt;
  &lt;Table&gt;
       {rows.map(row =&gt; &lt;Row row={row} checkRow={checkRow} setShowModal={setShowModal} /&gt;}
       &lt;NotesModal /&gt;
  &lt;Table&gt;
  </code></pre>
  <p>Each row would:</p>
  <pre><code>const Row = (props) =&gt; {
    let { row, checkRow, setShowModal } = props;
    return (
      &lt;tr&gt;
        &lt;td&gt;some data&lt;/td&gt;
        &lt;td&gt;&lt;button onClick={() =&gt; checkRow(row.rowId)} /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button onClick={() =&gt; setShowModal(true)} /&gt;&lt;/td&gt;
      &lt;/tr&gt;
    );
  }
  </code></pre>
  <p>However there are a two major issues that affect rendering.</p>
  <p>First is the <code>NotesModal</code>.  By keeping the <code>NotesModal</code> in the parent Table, I have only one modal that I can update with the selected row (save an <em>activeRow</em> in the parent tables state), however showing/hiding the modal causes the entire table to re-render because I'm setting the state of the parent table, which with hundreds of rows will be quite slow.  I could move the <code>NotesModal</code> to each row which would then only render the individual row that's selected, but then I would have hundreds of Modals in the tree - seems like it would work fine but also seems like a bad practice.</p>
  <p>Second, checking any individual row updates the <em>rows</em> in the parent state, which then causes the entire table to re-render.  I tried using <code>useMemo</code> for each row and used the row properties as the dependents so individual rows would only re-render if they had to, but once a row was added/removed it blanked out.  The more I looked into <code>useMemo</code> the more it seemed like I was trying to hack it into a place it wasn't meant to be used.  I could potentially move the <code>selected</code> state of the row down into the Row component's state, however I don't know how I would implement the <code>checkAllRows</code> function because the <code>checked</code> state would now be down in the child component and the parent would not have direct access to it.</p>
  <p>What's the best way to structure my state/functions to get this working without having things re-render all the time.</p>