子要素参照 React.forwardRef

子コンポーネントの適当なものと紐付いた参照を親コンポーネントから覗きたい場合に使います。React.forwardRefでラップするコンポーネントはpropsの他にrefを2つ目の引数に受け取ります。この中身は親コンポーネントのどこかで生成された参照です。

以下は1秒後にチェックボックスをチェックするです。

const Child = React.forwardRef((_, ref) => {
  return <input ref={ref} type="checkbox" />;
});

const App = () => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    setTimeout(() => {
      ref.current.checked = true;
    }, 1000);
  }, []);

  return <Child ref={ref} />;
}

Childに対してReact.forwardRefを使ってます。そして渡されたrefinput[type=checkbox]に渡すことでこの要素を親から直接触れるようにしてます。

Appでは描画が完了後にそのrefを通してinput[type=checkbox]checkedを真にすることでチェック済の状態に DOM を更新してます。