title: Hover Effect in React is too slow (state update for hover effects)
body: <p>I am trying to change the background color of a list item in case the user is hovering on top of it.
  But when the list size grows the hover effect becomes too slow and gives a feel as though the site is lagging.</p>
  <p>I am using the Tree View component of material UI and jss for styling</p>
  <p>important pieces of code</p>
  <p>use states</p>
  <pre><code>   const [hoverElementId, setHoverElementId] = useState(&quot;&quot;);
  </code></pre>
  <p>important functions</p>
  <pre><code> const handleTreeItemMouseHover = (event, label, nodeId) =&gt; {
          let hoverKey = generateKey(nodeId, label);
          setHoverElementId(hoverKey);
      }
  
      const handleRegionSelectUnselect = (value, selectedKey, selected) =&gt; {
          let selectedRegions = { ...selectedRegionsLocalState };
  
          if (selected === true) {
              selectedRegions[selectedKey] = value;
          }
          else {
              delete selectedRegions[selectedKey];
          }
  
          setSelectedRegionsLocalState(selectedRegions);
      }
  
  const generateKey = (nodeId, name) =&gt; {
          return String(nodeId) + &quot;-&quot; + String(name);
      }
  const getTreeItemLabel = (labelText, labelData) =&gt; {
          let selectedKey = generateKey(labelData.nodeId, labelText);
          let isItemSelected = selectedRegionsLocalState[selectedKey];
          let isItemHovered = selectedKey === hoverElementId
          return (
              &lt;Grid
                  onMouseOver={(event) =&gt; {
                      handleTreeItemMouseHover(
                          event,
                          labelData.name,
                          labelData.nodeId
                      )
                  }}
                  style={
                      isItemHovered ? { backgroundColor: &quot;grey&quot; }
                          :
                          isItemSelected ? { backgroundColor: &quot;red&quot; }
                              : {}
                  }
                  container justify=&quot;space-between&quot; &gt;
                  &lt;Grid item className={classes.treeItemLabelText}&gt;{labelText}&lt;/Grid&gt;
                  &lt;Grid item
                      className={classes.selectUnSelectText}
                      onClick={(event) =&gt; {
                          handleRegionSelectUnselect(
                              labelData,
                              selectedKey,
                              //toggle value in case selected -&gt; deselect item and vice versa
                              isItemSelected ? false : true
                          )
                          event.preventDefault();
                      }}&gt;
                      {
                          isItemHovered ?
                              (
                                  isItemSelected ?
                                      Constants.ClickToDeselectRegion :
                                      Constants.ClickToSelectRegion
                              )
                              :
                              &quot;&quot;
                      }
                  &lt;/Grid&gt;
              &lt;/Grid &gt;
          )
      }
  </code></pre>
  <p>this is what I am trying to achieve on hover change color and show text for select or deselecting item</p>
  <p><a href="https://i.stack.imgur.com/x7vqI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x7vqI.png" alt="enter image description here" /></a></p>
  <p>this is the example of lagging that I was talking about</p>
  <blockquote>
  <p>cursor might not be visible but it is on Arlington while I was going
  up from the bay city</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/Hyaxv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hyaxv.png" alt="enter image description here" /></a></p>
  <p>the whole code snippet in case you wish to refer</p>
  <p>note: it won't work as I have not added redux here that would just complicate that small sample in case it is required let me know</p>
  <p>link:<a href="https://codesandbox.io/s/sparkling-water-1b49r?file=/src/ManageRegion.js" rel="nofollow noreferrer">Tree view hover</a></p>
  <p>In case react state update is not the way for this please suggest any other way for this</p>