ひよっこと見るforwardRefとuseRef

🐤 はじめに

Component の定義のセオリーを知るために、最近デジタル庁の Storybook のリポジトリ を見ています。

今回はその中で初めてみたforwardRefと、名前は知ってたけど使ったことがなかったuseRefについて調べました。

見ていたのはButtonです

先に書いておきますが、forwardRefは React19 から非推奨です。
React19 以降は props で ref を使えるらしいので、そちらを使うのが良いでしょう。

✅️ この記事でわかること

• forwardRefってなに？
• useRefってなに？
• React19 からforwardRefは非推奨らしいけど、Next.js では？

🔍️ forwardRef ってなに？

React 公式ページ：forwardRef

React 19 では、forwardRef は不要となりました。代わりに props として ref を渡すようにしてください。

React19 からは非推奨になっているみたいですね。

🐤「知るのが遅かったか……」

forwardRef は、親コンポーネントに対して DOM ノードを ref として公開できるようにします。

🐤「そもそもrefがあるとなにが嬉しいんだろう……？」

🤔 そもそも useRef もあんまわかってない

ということで一旦useRefを調べてみました。

React 公式ページ：useRef

render に使用しない値の管理に使う？

ボタンを押したらアラートで表示するクリック回数が例に出ていました。
▶ useRef を用いて値を参照する使用例 ＞ 例 1/2: クリックカウンタ

ref の値の変更で再 render が走らない

useRefの値が変更されても再 render は走らないそうです。
そのため、表示に用いない値を保存することに使用されるみたいです。

例えばuseRef を用いて値を参照する使用例 ＞ 例 1/2: クリックカウンタ なら、button をクリックした時にalertでクリック回数を表示しています。

これは render には使用されておらず、alertの文字列に渡す場合のみ使用されています。

🐤「他で render に使わない場合はuseStateではなく、useRefを使うと再 render が走らないので良い、ということみたいですね」

逆に、値が変わっても再 render が走らないので、render に使用するなら useStateを使う必要があります。
render で使用する値なのかどうかがuseStateとuseRefどちらを使うかの判断基準になりそうです。

DOM 操作でよく使う？

▶ ref で DOM を操作する

import { useRef } from "react";

export default function Form() {
    const inputRef = useRef(null);

    function handleClick() {
        inputRef.current.focus();
    }

    return (
        <>
            <input ref={inputRef} />
            <button onClick={handleClick}>Focus the input</button>
        </>
    );
}

上記のようなFormComponent では、useRefのinputRefオブジェクトにinputの参照が入ります。
そして、buttonをクリックするとinputRef.current.focus();によってinputRefに入っている参照、すなわちinput要素に focus される、ということみたいです。

こういった使い方でよく使用されるのが、useRefとrefらしいですね。

💡 改めて forwardRef ってなに？

• React の forwardRef はなぜ必要で、いつ使うべきか
• 親コンポーネントに DOM ノードを公開する

「独自定義の Component には通常は ref={hogeRefObject}が渡せない ⇒ 親に独自定義 Component 内の要素を公開できない」
ということでforwardRefが登場するみたいです。

▼ こういう感じで Component を定義（引用：React の forwardRef はなぜ必要で、いつ使うべきか）

import { forwardRef } from "react";

const MyInput = forwardRef(function MyInput(props, ref) {
    const { label, ...otherProps } = props;
    return (
        <label>
            {label}
            <input {...otherProps} ref={ref} />
        </label>
    );
});

▼ のような感じで使用できるらしい

function Form() {
    const ref = useRef(null);

    function handleClick() {
        ref.current.focus();
    }

    return (
        <form>
            <MyInput label="Enter your name:" ref={ref} />
            <button type="button" onClick={handleClick}>
                Edit
            </button>
        </form>
    );
}

1. FormのrefオブジェクトにMyInputのinputの参照が入る
2. Formのbuttonがクリックされると、refに focus
3. refには「MyInputのinputの参照」が入っているので、「MyInputのinputの参照」に focus

ということができるみたいです！

⚠️ React19 から forwardRef は非推奨になるらしい

▶ ref が props に

React19 からは関数 Component で ref に props としてアクセスできるようになるようです。

今回forwardRefが登場する要因となっていた「独自定義の Component 内の要素にアクセスできる ref」というものが、
そもそも props でできるようになるので、不要になるということみたいですね。

今後、DOM 操作などで独自定義 Component にrefを渡したくなったら、props に渡せば良いみたいです！

▼ ref が props により

function MyInput({ placeholder, ref }) {
    return <input placeholder={placeholder} ref={ref} />;
}

//...
<MyInput ref={ref} />;

⚛️ Next.js で React19 は使える？

最近、Next.js を触っているので、気になって調べてみました。

結論として、 Next.js 15.1 から使えるみたいです！
▶ Next.js 15.1 ＞ React 19 (安定版)

Next.js で DOM 操作をしたい時も 15.1 以上であれば、 forwardRef を使わなくてよさそうですね！

🐤 まとめ

• forwardRefってなに？
  • 独自定義 Component にrefを渡せるようにすることができるもの
  • ただ、React19 からは非推奨になる
  • React19 からは props で refを渡せるようになるので、そちらの手段を使う！
• useRefってなに？
  • この値が変更されても、再 render が走らない
  • ↑ を利用して、render に使用しない（再 render される必要がない）値の管理に使用される
  • 特に、DOM 操作のためにrefを使う場合によく使われる
  • buttonがクリックされたら、refで参照できるようにした別の DOM（例えばinput）に focus する、というようなことができる！
• React19 からforwardRefは非推奨らしいけど、Next.js では？
  • Next.js の 15.1 以上で React19 に対応済
  • Next.js15.1 以上を使用する場合は、forwardRefではなく、props に渡せば良い！

記事に関係ない話

最近、ChatGPT に絵文字をたくさん使ってもらうのにハマっています。
かわいいな、と思って絵文字をたくさん使って賑やかにしてもらっています。

今回はせっかくなので記事の見出しに絵文字をつけてみました。

Noto Color Emojiを使うようにしたらもっとかわいくなるんでしょうか？
検討中です！

📖 参考

• デジタル庁の Storybook のリポジトリ
• リポジトリの Button
• forwardRef
• useRef
• useRef を用いて値を参照する使用例 ＞ 例 1/2: クリックカウンタ
• ref で DOM を操作する
• React の forwardRef はなぜ必要で、いつ使うべきか
• 親コンポーネントに DOM ノードを公開する
• ref が props に
• Next.js 15.1 ＞ React 19 (安定版)