useRef で定義した変数の.currentが常にnullになる

Question

課題

React の useRef を使って自分で作成したコンポーネントを親コンポーネントから参照したいのですが、useRefで定義した変数にはnullしか代入されずアクセスできません。

再現コード

npx create-react-app で作成した直後のプロジェクトに、
以下のコンポーネント Test を追加します。

Test.js

const Test = () => {
	return (
		<div>
			test
		</div>
	)
}
export default Test;

Appコンポーネント (Testを 使う側 )で、以下のようにuseRefを定義し、
ボタンを押したときにrefTest変数の中身を確認してみます。

App.js

import { useCallback, useRef } from 'react';
import Test from './Test'

function App() {
	const refTest = useRef(null);

	const onClick = useCallback(() =>{
		console.log(refTest.current);
	}, [refTest]);

	return (
		<>
			<button onClick={onClick}>test</button>
			<Test ref={refTest}/>
		</>
	);
}
export default App;

このとき、コンソールには null が表示されてしまいます。
useCallbackを外したりしましたが、結果は変わりませんでした。

質問

Appから、refTest 変数を使って Test にアクセスしたいのですが、どのようにすればよいでしょうか?

Comments

[maisumakun]

> refTest 変数を使って Test にアクセスしたいのですが

具体的に、Testに対して何をしたいのですが？

[donchan777]

①Testコンポーネント内で定義された関数を、親コンポーネントAppから呼ぶ方法
②Testコンポーネント内で定義された変数を、親コンポーネントAppから参照・変更する方法

について知りたいです。

回答のコメントの方で、
①についてはuseImperativeHandleを使って実現する手段を教えていただきました。
②については先程コメントへの返信で counter を例に質問させていただきました。

Answer 1

ふつうに宣言した関数コンポーネントに対して、refは使用できません。

関数コンポーネントにはインスタンスがないため、デフォルトでは関数コンポーネントに ref 属性を使用することはできません。（React公式より、強調も原文ママ）

forwardRefを使う必要があります（React公式）。

Comments

[maisumakun]

関数コンポーネントのrefを、内側のエレメントに結ぶ以外の機能性を持たせたい場合、useImperativeHandleというHookを使うこととなります。

https://ja.reactjs.org/docs/hooks-reference.html#useimperativehandle

[maisumakun]

（もっとも、子コンポーネントの状態は、親からpropsを与えて制御するのが一般的なやり方です。単純に内部のエレメントへforwardする場合はともかく、useImperativeHandleを立てる必要のある場合はそうそうありません）

[donchan777]

maisumakunさん

ご回答誠にありがとうございます。
もう少しお付き合いお願いできないでしょうか。

例えば、Test コンポーネントが、カーソルを持つエディタコントロールとします。
カーソル位置は編集等で Test内部で変化するため、もしカーソル位置を Test の props にして上位から指定するよう設計してしまうとカーソル位置が固定されてしまうため、Testの内部でカーソル位置を state として持つべきだと考えました。

このとき、App 側からもカーソル位置を変えたいというケースがあり、その場合は
Test内に
const [pos, setPos] = useState(0); // カーソル位置
const setCursorPos = pos => {setPos(pos);}
を用意しておき、
Appから、
refTest.current.setCursorPos( 3 );
のように呼びたかったのです。

ご回答いただいた useImperativeHandle を使ってsetCursorPosを定義して、
Test.jsの末尾で
const TestWrapper = React.forwardRef(Test);
export default TestWrapper;
とエクスポートすることで、Appから
refTest.current.setCursorPos( 3 );
のように発行することができました。

さて、やりたいことは実現はできたのですが、
今回のようにAppからカーソル位置を指定したい場合は、
やはり useImperativeHandle を使わなければ実現できないのでしょうか?
それとも、他によい（一般的な）方法があるのでしょうか?

[maisumakun]

> 今回のようにAppからカーソル位置を指定したい場合は、
やはり useImperativeHandle を使わなければ実現できないのでしょうか?

そうですね、「カーソル位置」や「フォーカス状態」のような、通常Reactで管理していない値の制御はref経由でやって問題ない形です。

[donchan777]

maisumakunさん
ご回答ありがとうございます。
> 「カーソル位置」や「フォーカス状態」のような、通常Reactで管理していない値の制御はref経由でやって問題ない形です。

Reactで状態管理できるもの（カウント等の数値など）で 稀にApp（上位）から変更したい、という場合はどのように管理するのがよいのでしょうか?
例えばそれが何かのカウント値だった場合、
-----------------
・Test クラスのpropsでAppから counter を受け取る
・Test クラスでは、const [countValue, setCountValue] = useState(counter) でカウント値を管理
・App クラスでは、指定したくなったら props で渡している counter の値を変更する
・Test クラスでは、useEffect 等でcounterの変化をキャッチし setCountValue(counter) を呼ぶ
-----------------
という方法しか私には考えられませんでしたが、もっとよい方法があれば教えていただきたいです。

※追記
上位の方法では
①App が 0に設定
②Test内部で10になった
③App が 再度0を指定したい
というときに、props で指定している counterは 0 → 0 と変化がないのでTestのcountValueは10から変更されませんでした。

[maisumakun]

> Reactで状態管理できるもの（カウント等の数値など）で 稀にApp（上位）から変更したい、という場合はどのように管理するのがよいのでしょうか?

稀にであろうが、親から変えたいものは親の側にstateを持たせる（変更関数も一緒に子へ渡す）のが普通のやり方です。

[donchan777]

親側に持たせるというのは思いつきませんでした。
とても勉強になりました。
ありがとうございました。