ReactフックuseRef：forwardRef【基本】

useRefと、それに関連するforwardRefは、コンポーネント間での参照の受け渡しや、DOM要素への直接アクセスが可能になり、React開発がより便利になります。

useRefのおさらい！

useRefは、再レンダリングを引き起こさずに、値を保持するためのReactフックです。

また、DOM要素への参照を保持するためにも使われます。

JS

import React, { useRef } from 'react';

function Example() {
  // refContainer.currentで値にアクセスできます
  const refContainer = useRef(initialValue);
}

forwardRefとは？

forwardRefの基本

forwardRefは、親コンポーネントから渡されたrefを子コンポーネント内で使用できるようにするための関数です。

これにより、親から子、さらには孫コンポーネントへとrefを渡すことが可能になります。

• forwardRefの引数：
  関数コンポーネントを受け取り、そのコンポーネントでrefを扱えるようにします。
• refの受け取り方：
  コンポーネントの第二引数としてrefを受け取ります。

forwardRefの特徴

関数コンポーネントでrefを使用可能にする：
通常、関数コンポーネントはrefを直接受け取れませんが、forwardRefを使うことで可能になります。

親から子へのrefの受け渡し：DOM要素やクラスコンポーネントへのrefを子コンポーネント経由で渡せます。

components/FancyButton.jsx

import React, { forwardRef } from 'react';

const FancyButton = forwardRef((props, ref) => (
  <button ref={ref} className="fancy-button">
    {props.children}
  </button>
));

useRefとforwardRefの組み合わせ

useRefとforwardRefを組み合わせることで、親コンポーネントから子コンポーネント内部のDOM要素に直接アクセスできます。

これは、フォームの入力欄にフォーカスを当てたり、動画の再生・停止を制御したりする際に非常に便利です。

実践的な例：親コンポーネントから子コンポーネントのDOMにアクセス

親コンポーネント

App.jsx

import React, { useRef } from 'react';
import CustomInput from './CustomInput';

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

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={focusInput}>フォーカスを当てる</button>
    </div>
  );
}

export default App;

子コンポーネント

forwardRefを使用：
CustomInputコンポーネントがrefを受け取れるようにします。

refの設定：
受け取ったrefを内部の<input>要素に渡します。

親コンポーネントから子コンポーネントのinput要素にフォーカスを当てる。

CustomInput.js

import React, { forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} type="text" />;
});

export default CustomInput;

fowardRefの注意点

forwardRefを使用しない場合

refはundefinedになる：
forwardRefを使わずに子コンポーネントにrefを渡すと、refはundefinedとなり、currentプロパティにアクセスできません。

クラスコンポーネントの場合

forwardRefは不要：クラスコンポーネントではrefを直接受け取ることができます。

複数のrefを扱う場合

useImperativeHandleを使用：
forwardRefと組み合わせて、カスタムのrefハンドリングが可能です。

まとめ

useRefとforwardRefを理解し、組み合わせて使用することで、Reactにおけるコンポーネント間のrefの受け渡しが可能になります。

これにより、親コンポーネントから子コンポーネント内部のDOM要素にアクセスしたり、関数コンポーネントでrefを扱ったりすることができます。

• useRef：
  値やDOM要素への参照を保持します。
• .currentプロパティ：
  参照している値やDOM要素にアクセスします。
• forwardRef：
  親コンポーネントから渡されたrefを子コンポーネントで受け取り、内部で使用可能にします。