Consider the following code inside a React custom hook:

function createFadeOut() {
    if (!isDown && fading) {
      if (lineQueue.length !== 0)
        fadeOut(lineQueue.shift());
      else
        addLine(line => { return []; });
    }
    if (isDown && fading) {
      console.log('DOWN!');
    }
  }
  function fadeOut(line) {
      //code 
    }
  }


setInterval(createFadeOut, 60);

So what I want is a set of actions to happen in a discrete interval of time, depending on the state of the mouse and another event. isDown is set when mouse events are called. fading is a boolean state that is just called on a button click.

The specific behavior is that a list pops off an element and calls a function every 60 frames when the mouse is up, AND the list and other actions will be reset if the mouse is ever pressed again.

Of course, I am struggling correctly setting up the behavior.

• isDown doesn't represent the mouse state at all when calling the function by a setInterval. Most of the time, it will always be set to true when I already left the mouse alone.
• Using a useEffect hook, so it always represents the actual state of the mouse is problematic, it will be only called when a render happens and not at an interval.
• Same problems if I just stick the function in the mouse events and use setTimeouts, especially due to mouseUp only being called on a few frames.