ステートレスコンポーネントへの ref の渡し方

React では、通常、ref は状態を持つクラスコンポーネントにアタッチされます。しかし、関数型コンポーネント（ステートレスコンポーネント）にも ref をアタッチする方法はあります。

方法 1: Callback Ref

1. useRef Hook
   

   import { useRef, useCallback } from 'react';
   
   function MyStatelessComponent(props) {
     const ref = useRef(null);
   
     const handleRef = useCallback((node) => {
       ref.current = node;
     }, []);
   
     return <div ref={handleRef}>{/* ... */}</div>;
   }
   

2. 親コンポーネントでのアクセス
   

   function ParentComponent() {
     const myRef = useRef(null);
   
     return (
       <div>
         <MyStatelessComponent ref={myRef} />
         {/* Access the DOM node: myRef.current */}
       </div>
     );
   }
   

方法 2: ForwardRef

1. ForwardRef を使用したコンポーネントの定義
   

   const MyForwardRefComponent = React.forwardRef((props, ref) => {
     return <div ref={ref}>{/* ... */}</div>;
   });
   

注意

• 可能であれば、状態やプロップの管理を通じて、ref の使用を最小限に抑えることを目指しましょう。
• ref は、フォームのフォーカス制御、アニメーションのトリガー、サードパーティライブラリとの統合など、特定のシナリオで有用です。
• ref は DOM ノードや React 要素への参照を取得するためのものです。不必要な場合は使用を避けてください。

ステートレスコンポーネントへの ref のアタッチメント：コード解説

なぜ ref をステートレスコンポーネントにアタッチしたいのか？

通常、ref は状態を持つクラスコンポーネントにアタッチして、DOM ノードへの直接的なアクセスを得ることが多いです。しかし、関数型コンポーネント（ステートレスコンポーネント）にも ref をアタッチしたいケースがあります。例えば、

• サードパーティライブラリと連携したい
• アニメーションをトリガーしたい
• フォーカスを制御したい

といった場合です。

具体的な方法

方法 1: Callback Ref (useRef Hook)

import { useRef, useCallback } from 'react';

function MyStatelessComponent(props) {
  const ref = useRef(null);

  // useCallback を使って、ref の値を更新する関数をメモ化
  const handleRef = useCallback((node) => {
    ref.current = node;
  }, []);

  return <div ref={handleRef}>{/* ... */}</div>;
}

• useCallback
  handleRef 関数をメモ化することで、不必要な再レンダリングを防ぎ、パフォーマンスを向上させます。
• callbackRef
  ref プロパティに直接渡すのではなく、関数を渡します。この関数に、レンダリングされた DOM ノードが渡されます。
• useRef Hook
  ref を作成します。 current プロパティに、ref が指す DOM ノードが格納されます。

<!-- end list -->

function ParentComponent() {
  const myRef = useRef(null);

  return (
    <div>
      <MyStatelessComponent ref={myRef} />
      {/* myRef.current で DOM ノードにアクセス */}
    </div>
  );
}

const MyForwardRefComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>{/* ... */}</div>;
});

• props, ref
  コンポーネントに渡される props と、外部から渡される ref を受け取ります。
• forwardRef
  関数型コンポーネントに ref を渡すための高階関数です。

function ParentComponent() {
  const myRef = useRef(null);

  return (
    <div>
      <MyForwardRefComponent ref={myRef} />
      {/* myRef.current で DOM ノードにアクセス */}
    </div>
  );
}

どちらの方法を選ぶべきか？

• 複雑なコンポーネントで、再利用性が高い
  ForwardRef
• シンプルで、DOM ノードへのアクセスが目的
  useCallback Ref

注意点

• ref は、状態管理の代替ではありません。状態を管理したい場合は、useState や useReducer を使用してください。
• ref は、DOM ノードへの直接的なアクセスを提供するため、誤った使い方をすると、意図しない副作用を引き起こす可能性があります。
• ref は、React の宣言的なスタイルからは少し外れる概念です。過度な使用は避けるべきです。

ステートレスコンポーネントに ref をアタッチすることで、DOM ノードへの直接的なアクセスが可能になります。callback Ref と ForwardRef のどちらを使うかは、状況に応じて判断しましょう。

• カスタムフック: useRef と useCallback を組み合わせたカスタムフックを作成することで、コードの再利用性を高めることができます。
• TypeScript での型定義:

  interface MyRefObject {
    current: HTMLDivElement | null;
  }
  

  のように、ref.current の型を定義することで、より安全なコードを書くことができます。

カスタムフックによる抽象化

• 例
  
• メリット
  
  • ref のロジックを再利用可能にする
  • コードの可読性を向上させる

import { useRef, useCallback } from 'react';

function useMyRef() {
  const ref = useRef(null);
  const setRef = useCallback((node) => {
    ref.current = node;
  }, []);

  return [ref, setRef];
}

function MyComponent() {
  const [myRef, setMyRef] = useMyRef();

  return <div ref={setMyRef}>{/* ... */}</div>;
}

• 解説
  
  • カスタムフック useMyRef で ref の作成と更新のロジックをカプセル化します。
  • 他のコンポーネントでも useMyRef を呼び出すことで、同じ ref のロジックを共有できます。

Context API を利用した ref の共有

• メリット
  
  • 深くネストされたコンポーネント間で ref を共有できる
  • グローバルな状態管理に似た形で ref を管理できる

import { createContext, useContext, useRef } from 'react';

const MyRefContext = createContext(null);

function MyComponent() {
  const myRef = useRef(null);

  return (
    <MyRefContext.Provider value={myRef}>
      {/* ... */}
    </MyRefContext.Provider>
  );
}

function ChildComponent() {
  const myRef = useContext(MyRefContext);

  return <div ref={myRef}>{/* ... */}</div>;
}

• 解説
  
  • MyRefContext という Context を作成し、ref をその値として共有します。
  • 子コンポーネントで useContext を使って ref にアクセスします。

レンダープロップ (Render Props)

• メリット
  
  • 柔軟なコンポーネントの構成が可能
  • 高度なカスタマイズに適している

function MyInputWithRef({ render }) {
  const ref = useRef(null);

  return render({ ref });
}

function MyComponent() {
  return (
    <MyInputWithRef
      render={({ ref }) => <input ref={ref} />}
    />
  );
}

• 解説
  
  • MyInputWithRef コンポーネントが ref を持ち、render プロップを通じて子コンポーネントに ref を渡します。
  • 子コンポーネントは、render プロップで受け取った ref を自由に利用できます。

• 高度なカスタマイズが必要で、柔軟な構成をしたい
  render props
• 深い階層で ref を共有したい
  Context API
• 再利用性と可読性を高めたい
  カスタムフック
• シンプルで、コンポーネント内で完結する
  callback ref

選択のポイント

• 柔軟性
  render props は、非常に柔軟なコンポーネントの構成を可能にします。
• 共有範囲
  Context API は、グローバルな状態のように ref を共有したい場合に適しています。
• 再利用性
  カスタムフックは、ref のロジックを再利用したい場合に便利です。
• コードの複雑さ
  カスタムフックや Context API は、コードの複雑さを増す可能性があります。

ステートレスコンポーネントに ref をアタッチする方法には、様々な選択肢があります。それぞれの方法にはメリットとデメリットがあるため、状況に合わせて最適な方法を選択することが重要です。

• TypeScript
  TypeScript を使用することで、ref の型を安全に定義できます。
• React Hooks
  useRef 以外にも、useImperativeHandle など、ref に関連する Hook があります。