useRefの.currentがnullになる理由

React Hooks: useRef Hookの.currentがnullになる理由の日本語解説

React HooksのuseRefフックは、コンポーネントのレンダリング間で値を保持するために使用されます。しかし、.currentプロパティがnullになる場合があります。この現象について詳しく説明します。

.currentがnullになる理由

1. 初期化タイミング
   

   • useRefフックは、コンポーネントの最初のレンダリング時に初期化されます。
   • 初期レンダリング時には、.currentプロパティは初期値（通常はnull）に設定されます。

2. レンダリングサイクル
   

   • コンポーネントが再レンダリングされるたびに、useRefフックは再利用されます。
   • しかし、.currentプロパティは、前回のレンダリングから変更されない限り、同じ値を保持します。

.currentを適切に使用するポイント

1. 初期値の設定
   

   • useRefフックの初期値に、.currentプロパティに設定したい値を指定します。
   • これで、最初のレンダリング時から.currentプロパティが適切な値を持つようになります。

2. 更新タイミング
   

   • .currentプロパティを更新したい場合は、その値を直接変更します。
   • これは、コンポーネントの再レンダリングとは関係なく行うことができます。

コード例

import { useRef, useEffect } from 'react';

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

  useEffect(() => {
    // 初期レンダリング後に、DOM要素を取得して`.current`に設定
    myRef.current = document.getElementById('myElement');
  }, []);

  return (
    <div ref={myRef}>
      {/* ここにレンダリングする内容 */}
    </div>
  );
}

この例では、myRefにDOM要素への参照を保存しています。useEffectフックを使用して、最初のレンダリング後にDOM要素を取得し、.currentプロパティに設定しています。これにより、.currentはnullではなく、DOM要素への参照となります。

初期値がnullの場合

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(); // 初期値はnull

  return (
    <div ref={myRef}>
      {/* ここにレンダリングする内容 */}
    </div>
  );
}

• 初めてレンダリングされる際に、.currentプロパティはnullになります。
• この例では、myRefの初期値がnullに設定されています。

初期値を設定した場合

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(0); // 初期値は0

  return (
    <div ref={myRef}>
      {/* ここにレンダリングする内容 */}
    </div>
  );
}

DOM要素への参照を保存する場合

import { useRef, useEffect } from 'react';

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

  useEffect(() => {
    // 初期レンダリング後に、DOM要素を取得して`.current`に設定
    myRef.current = document.getElementById('myElement');
  }, []);

  return (
    <div ref={myRef}>
      {/* ここにレンダリングする内容 */}
    </div>
  );
}

• これにより、.currentはnullではなく、DOM要素への参照となります。
• useEffectフックを使用して、最初のレンダリング後にDOM要素を取得し、.currentプロパティに設定しています。
• この例では、myRefにDOM要素への参照を保存しています。

useStateフックの使用

useStateフックは、コンポーネントの状態を管理するために使用されます。状態の値は、コンポーネントの再レンダリング時に更新されます。

import { useState, useRef } from 'react';

function MyComponent() {
  const [value, setValue] = useState(null);
  const myRef = useRef();

  useEffect(() => {
    // 初期レンダリング後に、値を更新
    setValue(document.getElementById('myElement'));
  }, []);

  return (
    <div ref={myRef}>
      {/* ここにレンダリングする内容 */}
    </div>
  );
}

• この例では、useStateフックを使用して、DOM要素への参照を保存しています。

コンポーネントのライフサイクルメソッドの使用

コンポーネントのライフサイクルメソッドであるcomponentDidMountやcomponentDidUpdateを使用して、DOM要素への参照を取得し、.currentプロパティに設定することができます。

import { useRef } from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = useRef(null);
  }

  componentDidMount() {
    this.myRef.current = document.getElementById('myElement');
  }

  render() {
    return (
      <div ref={this.myRef}>
        {/* ここにレンダリングする内容 */}
      </div>
    );
  }
}

• この例では、クラス型コンポーネントを使用し、componentDidMountメソッドでDOM要素への参照を取得しています。

カスタムフックの作成

useRefフックの機能を拡張したカスタムフックを作成することもできます。

import { useRef, useEffect } from 'react';

function useDOMRef(initialRef) {
  const ref = useRef(initialRef);

  useEffect(() => {
    if (ref.current) {
      // 既に参照が設定されている場合は何もしない
      return;
    }

    // 初期レンダリング後に、DOM要素を取得して`.current`に設定
    ref.current = document.getElementById('myElement');
  }, []);

  return ref;
}

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

  return (
    <div ref={myRef}>
      {/* ここにレンダリングする内容 */}
    </div>
  );
}

• この例では、useDOMRefというカスタムフックを作成し、DOM要素への参照を取得する処理をカプセル化しています。