Time from the change of variable in useSelector and triggering useEffect takes too long

Viewed 24

I am using a useSelector in redux to save a variable. For example, in this case a variable called inFocus. This variable contains an array of objects. When this variable is updated (objects are being inserted into the array), it should trigger a useEffect 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?

The code:

function setItemOcrInFocus() {
    if (selections && selections.clicks) {
      const clicks = selections.clicks.filter(
        (c) =>
          c?.selectedItem === item.id || c?.selectedItemIndex === item.index
      );

      if (clicks.length > 0) {
        dispatch({
          type: SET_STATE,
          payload: {
            inFocus: clicks,
          },
        });
      }
    }
  }

return (
    <Component onMouseEnter={() => setItemOcrInFocus()} />
)

Component.js

function Component() {
    const [inFocus] = useSelector((state) => [
        state.item.inFocus,
    ]);

    useEffect(() => {
        // execute a function here
    }, [inFocus])
}

The function setItemOcrInFocus is triggered when a specific component is being hovered over.

Am I missing something here?

0 Answers
Related