React を使っていると必ず出てくるのが useRef。名前は聞いたことがあるけれど、「どんな時に使うの？」と迷う人も多いでしょう。useRef は、再レンダーを引き起こさずに値を保持したい時、また DOM 要素へ直接アクセスしたい時 に活躍するフックです。

■useRef は「箱」をイメージすると理解しやすい

useRef を呼び出すと、.current というプロパティを持つオブジェクトが返ってきます。この .current に値を入れてもコンポーネントは再レンダーされません。そのため、レンダーに影響させたくないカウンタや前回値の保存に向いています。

■DOM 要素を参照する

フォームへ自動フォーカスさせたいケースでは、DOM を直接触る必要があります。useRef は JSX の要素に ref 属性として渡すことで、その DOM を参照できます。

useState は値が変わると再レンダーされます。一方、useRef は何度書き換えてもレンダーが走らないため、「変わっても画面に影響しなくてよい値」 に適しています。

■まとめ

useRef は「再レンダー不要の値の保持」「DOM へのアクセス」という2つの場面で非常に便利です。特にパフォーマンス最適化やフォーム処理では必須のツールなので、使いどころを理解して積極的に活用してみましょう。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

Gogo

最新記事 by Gogo (全て見る)

• React の useRef をわかりやすく解説 - 2025年11月30日
• ReactのuseCallbackとは？ - 2025年10月28日
• HTMLでページ遷移すると、そのリクエストはブラウザによって中断されてしまう - 2025年9月28日