useUserMedia about react-use

[streamich]

Looks like could be a useful addition to this library.

[xvjg]

Ok wait... I actually found a problem.

I profiled my application and turns out a MediaStream saved in a component state will trigger a re-render every time there is a new frame in the video feed. This is very bad for the performance...

I guess the library shouldn't promote bad practice :p

[streamich]

Could removing stream prevent re-renders:

    useEffect(_ => {
        navigator.mediaDevices.getUserMedia(constraints)
            .then(setStream)
            .catch(errorCallback)
    }, []); // 👈 no stream

But you would also need to check your component was no unmounted when you set the stream.

Something like:

import {useRefMounted} from 'react-use';

        const refMounted = useRefMounted();
        navigator.mediaDevices.getUserMedia(constraints)
            .then((stream) => {
              if (refMounted.current) setStream(stream);
            })

[xvjg]

Could removing stream prevent re-renders

This simply halved the number of re-renders lol. My project structure is such that there's an App component which stores a MediaStream object, and puts it in a video.

I'll try a useVideo implementation, but that would be opinionated. Lemme check.

[xvjg]

Could removing stream prevent re-renders

This worked... No re-renders after that. I tried this hook on a fresh test app. Turns out my video-chat react project has some different problem :p Here's the fresh application where I tried the hook: https://gitlab.com/vixrant/useusermedia

You can use this snippet. I don't know typescript otherwise I would have sent a Pull Request!

And I noticed that I have to pass an empty array to useEffect. I can't let it be undefined. Turns out it's related to this. It's very weird and I hope they make it more intuitive.

function useUserMedia(constraints, errorCallback=(() => undefined)) {
    const [stream, setStream] = useState();

    useEffect(() => {
        navigator.mediaDevices.getUserMedia(constraints)
            .then(setStream)
            .catch(errorCallback)
    }, []);

    return stream;
}