useRef は、永続的なミュータブルな参照を作成するための React Hook です。変更されても再レンダリングを引き起こさない値を格納できます。一般的な用途は、DOM 要素への直接アクセスであり、入力フィールドへのフォーカスなどのアクションを可能にします。使用するには、React から useRef をインポートし、値で初期化します。参照オブジェクトには、格納された値または DOM ノードを保持する 'current' プロパティがあります。useState とは異なり、ref.current を変更してもコンポーネントは再レンダリングされません。useState は、UI に影響を与え、更新時に再レンダリングを引き起こす状態を管理するためのものです。対照的に、useRef は、タイマー ID や DOM 参照など、UI の更新なしにレンダリング間で永続する必要がある値に最適です。たとえば、useState 変数を変更すると再レンダリングがトリガーされますが、useRef.current を更新してもトリガーされません。DOM 要素にアクセスするには、'ref' 属性を使用して要素に ref をアタッチします。レンダリング後、ref.current は実際の DOM ノードを指し、直接操作できます。これは、テレビと直接やり取りするリモコンに似ています。useRef の鍵は、常に .current プロパティを介してその値にアクセスすることです。.current を変更すると値は変更されますが、React は自動的に再レンダリングしません。したがって、useRef は、再レンダリングを引き起こさずに「値を記憶する」および「参照にアクセスする」方法として理解するのが最適です。主な違いは、その動作にあります。useState の変更は再レンダリングと UI の更新につながりますが、useRef の変更はそうではありません。この違いを理解することは、React アプリケーションで useRef を効果的に使用するために不可欠です。