子コンポーネントの適当なものと紐付いた参照を親コンポーネントから覗きたい場合に使います。React.forwardRefでラップするコンポーネントはpropsの他にrefを2つ目の引数に受け取ります。この中身は親コンポーネントのどこかで生成された参照です。
以下は1秒後にチェックボックスをチェックする例です。
const Child = React.forwardRef((_, ref) => {
return ;
});
const App = () => {
const ref = React.useRef(null);
React.useEffect(() => {
setTimeout(() => {
ref.current.checked = true;
}, 1000);
}, []);
return Childに対してReact.forwardRefを使ってます。そして渡されたrefをinput[type=checkbox]に渡すことでこの要素を親から直接触れるようにしてます。
Appでは描画が完了後にそのrefを通してinput[type=checkbox]のcheckedを真にすることでチェック済の状態に DOM を更新してます。
