title: Performance Issues when rendering large tables in React
body: <p>I am creating a calendar component for scheduling using an HTML table and I want to be able to drag around an event similar to google cal. When I drag the element, I would like the background of the cell i am dragging over to change using the onDragEnter handler. I do this by saving an identifier to the cell in a state and then making the background style on the cell conditional.</p>
  <p>However, the background update appears to lag behind the user because the table is very large and since the cells are mapped, it is re-rendering the whole table. See below.</p>
  <p><a href="https://i.stack.imgur.com/qu9CG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qu9CG.png" alt="enter image description here" /></a></p>
  <p>See the code below.</p>
  <pre><code>const [dragCellNum, setDragCellNum] = useState(null);
  
  
  const handleDragIn = (e) =&gt; {
      e.preventDefault();
      e.stopPropagation();
      setDragCellNum(e.target.id);
  };
  
  // simplified return
  return 
  &lt;table&gt;
    &lt;tbody&gt;
      // Rows are mapped as well.
      &lt;tr&gt;
        // Mapping all the cells here
        {data.map(x=&gt; 
           &lt;td
             key={id}
             id={id}
             style={{
               // Here is conditional BG color change
               backgroundColor: id === dragCellNum ? '#CCCCCC' : #FFFFFF,
             }}
             onDragEnter={handleDragIn}
           &gt;
        )}
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>I left out a lot for simplicity's sake, but the table is large. Essentially, I am wondering if there is a way to use react memo or ref or a whole different way to do this to keep the entire table from re-rendering.</p>
  <p>Thanks, everyone.</p>