useEffect, useRefでハマったところ備忘録

/* 業務でハマったところなので、実際のコードとは異なる疑似コードです */

const audioRef = useRef<HTMLAudioElement | undefined>();

useEffect(()=> {
  console.log(audioRef === undefined) // 別のコンポーネントでaudioRefに代入しても常にTrueが出力される <- ①why?
}, [audioRef])

`当初の見立て`

1. 複数のコンポーネントが上記のhooksを呼び出す
2. 複数のaudioRefがundefinedでsetされる
3. useEffectが複数回実行される
4. 副作用関数が複数回実行される
5. audio elementのrender後に、#audio-container内に\<audio\>を作ってaudioRefに代入する
6. 副作用関数が動いい、①でFalseになるはず

①の原因:

refをdependencyにしても動かないことがあるよ、ということらしい

https://zenn.dev/service_503/articles/b7668a820b5856

https://stackoverflow.com/questions/60476155/is-it-safe-to-use-ref-current-as-useeffects-dependency-when-ref-points-to-a-dom

 

試行錯誤している最中に学んだこと

CallStack, Task Queue, Eventloopの概念

https://zenn.dev/yuhua_shi/articles/331569ef2fe886