-
Notifications
You must be signed in to change notification settings - Fork 104
Description
My setup:
const [sound, setSound] = useState(null)
const [play] = useSound(sound, ... )
in the useEffect hook I then fetch the sound-url and once fetched set it with setSound(soundSrc)
In my case if the fetch happens "too soon", no sound is played.
The culprit is the lazy loading of howler. As it loads the useEffect hook that is triggered on sound source change runs. The test that ensures the howler component is initialized fails and no further action is taken. Sound source remains unchanged, in my case, as it was null no sound is played.
The solution is trivial, add the howler loading state into the dependency array of the useEffect hook:
React__default.useEffect(function () {
...
}, [JSON.stringify(src), isMounted.current]);
This ensures the hook re-runs once howler is loaded. Now, of course, the hook will also be called every time howler finishes loading, maybe a test should be added to avoid the extra needless initialization of howler inside the hook? Regardless, for me this change alone solved the issue.