ReactにおけるRef

何らかの情報を記憶したいが、その変更によって コンポーネントのレンダリングを発生させたくない場合、 refと、それに対応するフック useRefが役立ちます。

Ref（または参照）は、唯一のプロパティである currentを読み取ったり変更したりできる、 通常のJavaScriptオブジェクトです。

ステートと同様に、refは任意のデータ型を 格納できます。数値、文字列、 オブジェクト、さらに関数も可能です。

データがレンダリングに使用される場合は ステートに保存し、 レンダリングが不要な場合は、 refの使用がより効率的になる可能性があります。 また、ステートとは異なり、refの値は 即座に変更されます。

一般的に、refはReactから離れて外部API （多くの場合、コンポーネントの表示に影響しない ブラウザAPI）と対話する必要がある場所で 使用されます。例えば、タイマーのidの保存や、 JSXの計算が不要なオブジェクトの保存が考えられますが、 最も一般的なのはDOM要素との対話です。 フォーカスの管理、テキストの選択、 メディアの再生などに使用できます。

次のレッスンでは、refとフックuseRefの 実践的な使用方法について詳しく見ていきます。