React + Redux + Thunk: multiple hooks on the same event - reactjs

Question

I've got stuck with a problem of hook reusage when state and redux store should work together. I've simplified a code to show the problem.
There is a component where I want to use multiple hooks (for simplicity I re-use useMouseDown hook here):
export function Counter() {
const count = useSelector(selectCount);
const dispatch = useDispatch();
const plusSighRef = useRef<HTMLButtonElement>(null);
useMouseDown({
ref: plusSighRef,
onMouseDown: () => {
console.log('in first hook');
dispatch(increment());
}
});
useMouseDown({
ref: plusSighRef,
onMouseDown: () => { console.log('in second hook'); }
});
return <button ref={plusSighRef}>+</button>;
}
Each hook has inner state and has own callback on mouse down event:
const useMouseDown = ({ ref, onMouseDown }) => {
const [isClicked, setIsClicked] = useState(false);
useEffect(() => {
const element = ref.current;
const down = (e: MouseEvent) => {
setIsClicked(true);
onMouseDown(e);
}
element.addEventListener('mousedown', down);
return (): void => {
element.removeEventListener('mousedown', down);
};
}, [onMouseDown, ref]);
}
As a result a mousedown event in second hook is never triggered. The problem is that re-render occurs earlier than second hook is started.
I found some solutions but don't like both:
use something like setTimeout(() => dispatch(increment()), 0) inside the first hook mousedown prop. But it seems to be not obvious in terms of re-usage.
rewrite two hooks into one and manipulate with one "big" mousedown handler. But in that case a combined hook could be difficult for maintaining.
So I need a solution that allow to retain structure as is (I mean two separate hooks), but has second hook is working too. Could someone help how to get it?

Answer 1

Can't you just keep your logic in two different functions and execute it sequentially in the hook's onMouseDown function?
const executeFirstFlow = () => {
console.log('in first function');
dispatch(increment());
};
const executeSecondFlow = () => {
console.log('in second function');
};
useMouseDown({
ref: plusSighRef,
onMouseDown: () => {
executeFirstFlow();
executeSecondFlow();
}
});