realdennis / createeventtargethook Goto Github PK

Thanks for building this nice React hook.

Since useEffect is not synchronously called, we witnessed some events are missed because useEffect was too late when subscribing to it.

For example, you can try it with Web Speech API, which is available in many modern browsers including Chrome. One of its event target speechSynthesis dispatch events synchronously as the page is being loaded.

Try it with create-react-app and replace App.js with the following content.

import useEventTargetHook from 'use-event-target';

const speechSynthesis = window.speechSynthesis || window.webkitSpeechSynthesis;
const useSpeechSynthesisEvent = useEventTargetHook(speechSynthesis);

const App = () => {
  useSpeechSynthesisEvent('voiceschanged', () => console.log('Fired by createEventTargetHook'));

  speechSynthesis.addEventListener('voiceschanged', () => console.log('Fired by addEventListener'));

  return 'Hello, World!';
};

export default App;

In console log, you will only see Fired by addEventListener but not the one on createEventTargetHook.

Your code is using useEffect to call addEventListener, which is not synchronous and probably too late.