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

リンク先のReactドキュメントページにある「Synchronizing with Effects」セクションと、その動画例から始めてください。提案されているrefでガードする代替案を、既存のuseEffectの説明と比較し、そのページで言及すべきかどうかを判断してください。ドキュメントが関連する選択肢と、それぞれが想定するユースケースを正確に示していれば完了です。

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