- 意図しないDOMノードが選択されるケースを防ぐため
Reactを用いた多くのプロジェクトでは様々なライブラリを使用します。 その中で挿入されたクラス名やIDが意図せず重複し、誤った選択がされるケースをuseRefを用いれば防ぐことができます。
- 単一方向のデータフローに適しているため
useRefでは、親コンポーネントでノード参照を定義し、それらを子コンポーネントに放り投げることができます。
それに対して、getElementByIdやquerySelectorは完全にデータフローを無視することができてしまいます。 また分割された子コンポーネントなどを参照する場合、親コンポーネントと子コンポーネントは互いに指定されるIDを持っている必要があります。
またquerySelectorの場合、取得される値はimmutableであり、現在のNodeTreeに存在するか判定することができません。
- フォーカス、テキスト選択、またはメディア再生の管理
- 命令型アニメーションのトリガー
- サードパーティのDOMライブラリとの統合
Reference callsによるDOMノードの管理とは、getElementById、useRef、createRefなどのことです。
同じ状態を複数のコンポーネントが所持している場合、これらの状態を共通化できる親要素まで持ち上げることで、レンダリングを抑制し、多くの場合ロジックを単純化することができるため、状態を持ち上げることは一般に推奨されています。ですがuseRefを用いると、その参照の状態をそのコンポーネント自体またはその子要素で管理することになり、 無駄なレンダリングを発生する原因となりえます。そのためReference callsによるDOMノードの管理は極力避けられるべきです。
useRefの用途にない使い方をしようとしている場合、useRefを用いず親要素によって状態を管理できないかよく考えましょう。
適当に書いたので嘘がわりとあるかもしれない