React Docs BETAを読む 【Referencing Values with Refs】

Managing Stateの章に続いてEscape Hatchesの章を読んでいきます。

Referencing Values with Refs

Refを使用した値の参照というタイトルです。
コンポーネントに情報を記憶したいけど、レンダリングをトリガーしたくない場合はrefを使用します。

useRefは以下のようなコードで宣言できます。

const ref = useRef(0);

ちなみに実態は次のようなオブジェクト。

{
    current: 0
}

ただのオブジェクトなので、関数でもなんでも指すことができます。
refはただのJavascriptオブジェクトですね。
refは状態と同じで保持されますが、レンダリングをトリガーはしないことは注意。

Differences between refs and state

refs	state
保持するオブジェクトを返します	状態変数と状態を変数する関数を返します。
変更しても再レンダー	変更すると再レンダリングされる
レンダリング外でも値が変更可能	状態更新用の関数を通してしか変更できません。
レンダリング中に値の読み書きはしてはならない	いつでも読み取り可能。ただしスナップショットで管理されている

When to use refs

refは外部API（多くの場合、ビューに影響にのないブラウザーAPI）とのやりとりなど使用します。

• タイムアウトIDの保存
• DOM要素の保存と操作
• JSXの計算に必要のないオブジェクト

なんらかの値を保持するが、レンダリングロジックに影響を与えない場合、refsを選択するようです。
DOM要素の保存で使用することが結構多いイメージですね。

Best practice for refs

以下がベストプラクティスのようです。

• refはあくまで逃げ道。外部システムやブラウザAPIと連携するときに便利ですが、多くがそれに依存している場合はアプローチの変更をしたほうが良いです。
• レンダリング中はrefの読み書きを行わない。それをする必要が有る場合はStateを使用する。

あくまで限られたUsageの中で使用するというのが正しそうですね。
おそらく追跡も難しいでしょうし、依存が多くなってもStateと違って管理するのか難しくなると思います。
DOMの参照などの利用ばかり見るのも上記理由があるのでしょう。

Refs and the DOM

JSXにrefを渡せば、Reactは対応するDOMをrefに設定します。
入力のフォーカスやツールチップなどでよく使用しているのを見かけますね。
別の章で解説あるようなのでまた追って読んでいきたいと思います。

まとめ

refの基本的な知識といった感じの章でした。
実態がただのオブジェクトなので使いやすいように思えますが、依存が多くなれば見通しが悪くなるため使い所には気をつけたいところです。
ただ実際DOMの参照にばかり使っているので、他の使い方も試していきたいと思いました。