[Suggestion]: Other method to fix issue rather than depending on useEffect

[onkarhanchate14]

Summary

In Synchronizing with effects section https://react.dev/learn/synchronizing-with-effects inside learn, there's a video section where we show issues in using ref and setting play/pause methods with ref and it raises error

`function VideoPlayer({ src, isPlaying }) {
const ref = useRef(null);
if (isPlaying) {
ref.current.play(); // Calling these while rendering isn't allowed.
} else {
ref.current.pause(); // Also, this crashes.
}

return

And below it we say way to solve this is by using useEffect

But rather we can use following way instead to solve the issue. I guess we should tell readers that this can also be possible way but here we'll see how we can solve with useEffect.

`function VideoPlayer({ src, isPlaying }) {
const ref = useRef(null);
if(ref.current !== null){
if (isPlaying) {
ref.current.play(); // Calling these while rendering isn't allowed.
} else {
ref.current.pause(); // Also, this crashes.
}
}

return

Page

https://react.dev/learn/synchronizing-with-effects

Details

I think we should show readers this way of solving the null Ref issue. This will help them to understand different ways and correct usecase of useEffect.

Subsection URL - https://react.dev/learn/synchronizing-with-effects

[bondz]

@onkarhanchate14 below the sandbox it says

The reason this code isn’t correct is that it tries to do something with the DOM node during rendering. In React, rendering should be a pure calculation of JSX and should not contain side effects like modifying the DOM.

Your suggestion of checking for null with if(ref.current !== null) while it technically solves the problem isn't the correct solution either. The ref would still be modifying the DOM, using useEffect here is correct.