Reactで混乱することのない useRef と createRef の理解と適用

こんにちは、Reactを使った開発で遭遇するかもしれない問題について解説します。今日は、useRef と createRef の違いとそれぞれの使用例について詳しく見ていきましょう。

useRef と createRef の基本

Reactでは、useRefとcreateRefという2つの異なるrefの作成方法が存在します。これらは主にDOM要素への参照を取得するために使用されますが、それぞれ異なる目的と状況で使用されます。

createRefは主にclass componentで使用され、毎回新しいrefインスタンスを作成します。つまり、React componentが再レンダリングされるたびに新しいrefが作成されます。

一方、useRefはReact Hooksの一部であり、function componentで使用されます。最初の呼び出し時に引数として与えられた値で初期化されたmutableなrefオブジェクトを返します。そのオブジェクトは.currentプロパティを持ち、このプロパティは参照の対象となる値を変更できます。そして、コンポーネントが再レンダリングされるたびに同じrefオブジェクトが返されます。

---

createRef の使用例

以下に、Reactのclass componentでcreateRefを使用する基本的な例を示します。

import React from 'react';

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

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return <input ref={this.myRef} />;
  }
}

export default MyComponent;

ここでは、createRefを使用してinput要素への参照を作成し、componentがマウントされた時点でそのinput要素にフォーカスを当てています。

---

useRef の使用例

次に、Reactのfunction componentでuseRefを使用する基本的な例を示します。

import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    myRef.current.focus();
  }, []);

  return <input ref={myRef} />;
}

export default MyComponent;

この例では、useRefを使用してinput要素への参照を作成し、componentがマウントされた時点でそのinput要素にフォーカスを当てています。useRefは最初に作成したrefを再利用するため、同じrefオブジェクトが返される点に注意してください。

---

useRef と createRef の違い

createRefとuseRefの主な違いは、再レンダリング時に新しいrefインスタンスを作成するかどうかです。createRefは毎回新しいrefを作成しますが、useRefは最初に作成したrefを再利用します。

したがって、refの値を追跡する必要がある場合や、refの値が変更されてもコンポーネントを再レンダリングしたくない場合はuseRefを使用します。また、useRefはReact Hooksの一部であり、function componentで使用されます。

---

まとめ

この記事では、ReactのuseRefとcreateRefの違いとそれぞれの使用例を見てきました。適切に使用することで、Reactアプリケーションのパフォーマンスを改善し、コードの可読性を高めることができます。

---

最後に、この記事が役立つと感じたら、ぜひ「いいね」を押してください。あなたのサポートが私たちの励みになります。ありがとう！