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?