https://zenn.dev/naokifujita/articles/91f61199f9b5f8
筆者はVue2からReact17へのフレームワーク移行を進めていました。 React Hookによる関数コンポーネントへの移行を進めるにあたり、refをどう使うべきかとforwardRefを使うべきかどうかについて移行を進めながら考え、自分なりの結論を出しましたので紹介します。 時間がない方は最後のまとめだけ読んでください。
VueやReactを扱っていると微妙に異なるニュアンスでrefというタームが使われています。 ここでは用語整理も兼ねて4つぐらいあるそれぞれのrefを紹介します。
これはReactで言うところのuseStateとほぼ等価でリアクティブステートを宣言するのに用います。
これはDOMやVueコンポーネントを指すことができる(ポインタのような)インターフェースで、DOMの制御をしたり別のVueコンポーネントのメソッドなどを呼び出すことができます。refという名前のHTML属性を用いて、参照を変数に代入することでDOMを制御できるようになります。
公式ドキュメントは割と抽象的な表現をしているので分かりにくいですが、下記のStackOverFlowの回答を見てcreateRefの定義を見たことでスッキリ理解できました。currentをキーとして持つオブジェクトで、任意のオブジェクトを指せる可変参照(ポインタ)のようなものだと理解すれば良いです。refという名前の通りですね。
Reactの公式ドキュメントにはtemplate refというタームは使われていないですが、区別したほうが理解が捗るためこの記事ではVueのタームを借用しています。 基本的にはVueのtemplate refと差はないですが、React Hook時代によく用いる関数コンポーネントには使用できず、工夫しなければ関数コンポーネント内のメソッド呼出もできません。
関数コンポーネント (function components) には ref 属性を使用してはいけません。なぜなら、関数コンポーネントはインスタンスを持たないからです
refは基本的に使用するべきではないと公式ドキュメントで言及されています。
宣言的に行えるものには ref を使用しないでください。
refを多用するということは、Reactにより実現されるDOM=f(data)というデータ駆動の宣言的レンダリングを阻害することに他ならないので、同意します。