Unable to update state or ref within device.addListener()

[LMarsiske]

I am trying to keep track of MIDI messages received from the listener for midimessage but it seems I am unable to access state or refs for the current component from within the listener. I am trying to keep track of which notes have been received from a specific device so that I can compare against the available notes and figure out what hasn't been played yet. No error messages are present in the console.

I initialize the WebMIDI instance in a custom hook and return both the WebMIDI instance and the connected device

import { WebMidi, Input } from "webmidi";
import { useEffect, useState } from "react";

const useWebMidi = () => {
  const [midi, setMidi] = useState<any | null>(null);
  const [device, setDevice] = useState<Input | null>(null);

  useEffect(() => {
    const enableMidi = async () => {
      await WebMidi.enable().then((webmidi) => {
        setMidi(WebMidi);
        WebMidi.addListener("connected", (e: any) => {
          const certainDevice: Input | undefined =
            WebMidi.getInputByName("Specific Device Name I Am Looking For");

          setDevice(certainDevice || null);
        });
        WebMidi.addListener("disconnected", (e: any) => {
          setDevice(null);
        });
      });
    };
    enableMidi();
  }, []);

  return [midi, device];
};

export default useWebMidi;

In this first example, the callback function fires on every MIDI message as expected but the state boolean never gets updated.

const [midi, device] = useWebMidi();
const [canFlipBoolean, setCanFlipBoolean] = React.useState<boolean>(false);

useEffect(() => {
    if (!midi || !device) return;

    device.addListener("midimessage", (e: any) => {
      console.log("past handleMidiMessage");
      setCanFlipBoolean(true);
      console.log("past setCanFlipBoolean");
    });
  }, [midi, device]);

In this second example, the contents of the ref are available inside the callback function and I can update it correctly but functions outside of the callback only see the unmodified ref contents.

const [midi, device] = useWebMidi();
const dummyRef = React.useRef<number[][]>([])

useEffect(() => {
    if (!midi || !device) return;

    device.addListener("midimessage", (e: any) => {
        // e.data = [noteon/off, midinumber, velocity]
        // This logs the correctly updated ref array as of the last call
        console.log(dummyRef.current)
        const copy = [...dummyRef.current, e.data]
        dummyRef.current = copy
        // This logs reflects the most recent update from the line above
        console.log(dummyRef.current)
    });
  }, [midi, device]);

const logDummyRef = () => {
        // Logs empty array
        console.log(dummyRef.current)
}

EDIT:
I forgot to mention that both state and refs are correctly updated when I set up a dummy keyboard event listener on the document object as a control test

// Simplet dummy listener for a spacebar press
document.addEventListener("keydown", (e) => {
    if (e.key === " ") {
      e.preventDefault();
      // This log fires and the state variable correctly updates
      console.log("spacebar pressed");
      setCanFlipBoolean(true);
    }
});

Environment:
Libarary version: CJS
Runtime: Browser, Next.js 12
Language: TypeScript
OS: Windows 10 22H2 build 19045.3324

[djipco]

Does you code highlight an issue or bug in the WEBMIDI.js library itself? If not, it would be more appropriate to post it to the discussions area.

[djipco]

Since I haven't heard back from you, I'm going to move your message to the Discussions section (Q&A).