0

I'm trying to set up a custom context menu, however whenever the user right clicks the context menu function returns 6 separate times, the 5th being what I need and the 6th being the default state values. However if the user double right-clicks in the same spot it returns 5 times, with the 5th return being the desired values and the menu opens. Is there a way to check before the return if all the states are changed and only return from the callback if all the needed information is present?

const ContextMenu = outerRef => {
  const [xPos, setXPos] = useState("0px");
  const [yPos, setYPos] = useState("0px");
  const [menu, showMenu] = useState(false);
  const [menuTarget, setMenuTarget] = useState('');
  const [menuTargetId, setMenuTargetId] = useState('');
  const handleContextMenu = useCallback(
    event => {
      if(event.target.className && (event.target.className.includes('bar') ||event.target.className == 'timeline' || event.target.className == 'draggablediv' || event.target.className == 'editableDiv')){
         event.preventDefault();
         if (outerRef && outerRef.current.contains(event.target)) {
            setXPos(`${event.pageX}px`);
            setYPos(`${event.pageY}px`);
            setMenuTarget(event.target.className)
            setMenuTargetId(event.target.id)
            showMenu(true);

         } else {
             showMenu(false);
           }
       }
    },[showMenu, outerRef, setXPos, setYPos]);

const handleClick = useCallback(() => {
  showMenu(false);
}, [showMenu]);

useEffect(() => {
  document.addEventListener("click", handleClick);
  document.addEventListener("contextmenu", handleContextMenu);
  return () => {
    document.removeEventListener("click", handleClick);
    document.removeEventListener("contextmenu", handleContextMenu);
  };
}, []);

return {xPos, yPos, menu, menuTarget, menuTargetId};
};
Neil Hutcheon
  • 19
  • 3
  • Check if one or many of those property is always change when you do right click `[showMenu, outerRef, setXPos, setYPos]` – Radonirina Maminiaina Nov 17 '21 at 21:42
  • Each time I click it returns 6 times, the first with a changed xPos, then xPos and yPos, then xPos, yPos, menuTarget, etc with the last return being xPos = 0px, yPos = 0px, and menu = false – Neil Hutcheon Nov 17 '21 at 21:53
  • a) your `useEffect` is missing `handleClick` and `handleContextMenu` as dependencies (although practically, the `useState` setters never change, your only real dependency is `outerRef`) b) you should use a *single* state for your position and target of the menu, not 5 of them. React cannot batch the updates together if you call the state setters from outside a react context. – Bergi Nov 18 '21 at 00:01

1 Answers1

0

useCallback accepts a function that returns the memoized value. Like useCallback(() => 5, []), or in your case useCallback(() => event => {...}, []).

This is because React has to call the function to get the value to memoize, so your setters are being called on every render. Which is what's causing all the weirdness.

However, even with that fix I don't think it's correct to use a function that changes references in addEventListener. You will never have up-to-date values in your contextmenu handler because it will refer to an old version of handleContextMenu. You will probably have to use a more idiomatic way of attaching a function to a UI event than the global document api.

windowsill
  • 3,599
  • 1
  • 9
  • 14