React 公式の Ref の記事を簡潔にまとめました

Referencing Values with Refs

ref について分かり易いとお薦めしてもらった公式の記事を読み、箇条書きでまとめたものです。

ref とは

コンポーネントに何らかの情報を「記憶」させたいが、その情報が新たなレンダリングのトリガーになることは避けたい場合、refを使用することができます。これは、コンポーネント内に情報を保存するための秘密の「ポケット」のようなものです。

• ステートとは別のデータの保存先のようなもののようです。

ref の特徴

• ref は プレーンなJSのオブジェクトです。
• ref の更新をしてもコンポーネントが再レンダリングされません。
  • ステート は更新すると基本的には再レンダリングされます。ここが大きな違いでもあるようです。
• useRef(初期値) で呼び出すと、 {current: 初期値} をもったオブジェクトが返る。
• ref の値は .current を使って保存、呼び出しを行う。

ref の使い方

const hogeRef = useRef(0) // ref の呼び出し

console.log(hogeRef.current) //=> 0

hogeRef.current = 1 // 値の更新

console.log(hogeRef.current) //=> 1

ref の使い道

• timeout ID などを保持したい場合
  • 時間指定関数を実行する場合
    • 例えばsetInterval()で設定された処理を削除する clearInterval(timeoutId) を実行する場合に setInterval() の戻り値で与えられる timeoutId はどこかに保存する必要があります。 これはJSXの計算に不要であり、ref に保存して扱うのが適切だと考えられます。
• DOM エレメントを操作する場合
  • 最も使われるケースです。
  • ref はプレーンなJSのオブジェクトなので、これをコンポーネントに埋め込み、scrollIntoView()などの操作ができるようになります。
• JSXの計算に不要なオブジェクトを保存する場合

ステートとの比較

公式より抜粋

ベストプラクティス

• ref に依存し過ぎている場合は見直すべき
• レンダリング中に ref.current の読み書きをしない。
• レンダリングに必要な値を持たせない。
• ただし、最初のレンダリングに一度だけ発火する書き方は許容される。

その他

次回はその続きの https://beta.reactjs.org/learn/manipulating-the-dom-with-refs を読みたいと思います。

追記：読みました↓