hrdtbs/なぜgetElementByIdやquerySelectorではなく、useRefを使うのか.md

## なぜgetElementByIdやquerySelectorではなく、useRefを使うのか.md

      
    Raw
  

              なぜgetElementByIdやquerySelectorではなく、useRefを使うのか.md
            
          
    なぜgetElementByIdやquerySelectorではなく、useRefを使うのか


意図しないDOMノードが選択されるケースを防ぐため

Reactを用いた多くのプロジェクトでは様々なライブラリを使用します。
その中で挿入されたクラス名やIDが意図せず重複し、誤った選択がされるケースをuseRefを用いれば防ぐことができます。

単一方向のデータフローに適しているため

useRefでは、親コンポーネントでノード参照を定義し、それらを子コンポーネントに放り投げることができます。
それに対して、getElementByIdやquerySelectorは完全にデータフローを無視することができてしまいます。
また分割された子コンポーネントなどを参照する場合、親コンポーネントと子コンポーネントは互いに指定されるIDを持っている必要があります。
またquerySelectorの場合、取得される値はimmutableであり、現在のNodeTreeに存在するか判定することができません。
useRefの用途


フォーカス、テキスト選択、またはメディア再生の管理
命令型アニメーションのトリガー
サードパーティのDOMライブラリとの統合

Reference callsによるDOMノードの管理は避けられるべき


Reference callsによるDOMノードの管理とは、getElementById、useRef、createRefなどのことです。

同じ状態を複数のコンポーネントが所持している場合、これらの状態を共通化できる親要素まで持ち上げることで、レンダリングを抑制し、多くの場合ロジックを単純化することができるため、状態を持ち上げることは一般に推奨されています。ですがuseRefを用いると、その参照の状態をそのコンポーネント自体またはその子要素で管理することになり、
無駄なレンダリングを発生する原因となりえます。そのためReference callsによるDOMノードの管理は極力避けられるべきです。
useRefの用途にない使い方をしようとしている場合、useRefを用いず親要素によって状態を管理できないかよく考えましょう。