pseudo.js

// external thing that sends/receives MIDI
const box = new Box();

export function MyComponent() {
  const [code, setCode] = useState('');
  // ...

  useEffect(() => {
    function handleKeyPress(id, key) {
      // ...
    }
    
    async function handleEnterKey(id) {
      // hits an external DB
      // for some reason this was always showing code as an empty string
      const isValid = await checkForValidCode(code);
      
      if (isValid) {
        box.setSuccessOn(id);
      } else {
        box.setFailureOn(id);
      }

      setCode('');
    }
    
    box.onKey(handleKeyPress);
    box.onEnter(handleEnterKey);
    return () => {
      box.offKey(handleKeyPress);
      box.offEnter(handleEnterKey);
    };
  }, [code]);
  
  // the UI is also subscribed to some other stuff to do with code claim status, etc.
  return (
    <p>{code}</p>
  );
}