title: Time from the change of variable in useSelector and triggering useEffect takes too long
body: <p>I am using a <code>useSelector</code> in redux to save a variable. For example, in this case a variable called <code>inFocus</code>. This variable contains an array of objects. When this variable is updated (objects are being inserted into the array), it should trigger a <code>useEffect</code> which should execute a certain function. However, this trigger takes a very long time (up to 6000ms), making the app looks laggy. How can I improve on this?</p>
  <p>The code:</p>
  <pre class="lang-js prettyprint-override"><code>function setItemOcrInFocus() {
      if (selections &amp;&amp; selections.clicks) {
        const clicks = selections.clicks.filter(
          (c) =&gt;
            c?.selectedItem === item.id || c?.selectedItemIndex === item.index
        );
  
        if (clicks.length &gt; 0) {
          dispatch({
            type: SET_STATE,
            payload: {
              inFocus: clicks,
            },
          });
        }
      }
    }
  
  return (
      &lt;Component onMouseEnter={() =&gt; setItemOcrInFocus()} /&gt;
  )
  
  </code></pre>
  <p><strong>Component.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>function Component() {
      const [inFocus] = useSelector((state) =&gt; [
          state.item.inFocus,
      ]);
  
      useEffect(() =&gt; {
          // execute a function here
      }, [inFocus])
  }
  </code></pre>
  <p>The function <code>setItemOcrInFocus</code> is triggered when a specific component is being hovered over.</p>
  <p>Am I missing something here?</p>