I have react code that works like so:
const [screenStream, setScreenStream] = useState(null);
useEffect(() => {
getPermissionsAndStreams();
}, []);
const getPermissionsAndStreams = () => {
getDisplayStream()
.then((_screenStream) => {
// After permission given
setScreenStream(_screenStream);
...
});
};
I.e. when the component loads, it requests permission from the user and saves that to the setStream variable.
However, this does not work when react's StrictMode is turned on. It seems to have a race condition where the page reloads, resetting screenStream to null, after setScreenStream has been activated.
Is there a different pattern of code that would avoid this problem? Or do we have to turn off strict mode?