再レンダーせずに値を保持する
再レンダーを引き起こさずにレンダーをまたいで可変値を保持し、シンプルなカウンターとタイマーIDでuseRefとuseStateを比較します。
「再レンダーせずに値を保持する」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
useRefを使う理由
目的：再レンダーを引き起こさずに、再レンダーをまたいで保持する値を保存します。useRefは、安定した.currentという入れ物を提供します。
- レンダーをまたいで保持される
- 変更しても再レンダーされない
- タイマーや以前の値に適している
RefとStateの違い
useStateを更新するとUIが再レンダーされます。useRefを更新しても再レンダーされません。UIに表示するデータではなく、可変な補助値（IDやロジック用のカウンター）にはrefを選びます。
デモ：refによるレンダーカウンター
エフェクト内でrenderCountを増やし、その値をrefに保持します。レンダーをまたいで保持されますが、再レンダーはトリガーしません。
<div id="root"></div>
useRefの適した用途
適した用途：
- タイマーやインターバルのID
- 以前の値のキャッシュ
- レンダー間で使うフラグ（例：isMounted）
不向きな用途：UIに表示する必要があるデータ。
デモ：refにタイマーIDを保存
インターバルIDをrefに保持すると、余分な再レンダーを発生させずにタイマーを開始・停止できます。
<div id="root"></div>
よくある問題とヒント
よくある問題：
- stateを使わずにrefを読み取ってUIを動かさないでください。UIは更新されません。
- IDやリソースを保持しているrefは、アンマウント時にリセットします。
- refをグローバルな入れ物として過度に使わないでください。
useRefの概念を確認
まとめ
まとめ：ID、以前の値、フラグなど、再レンダーをまたいで使う可変な値にはuseRefを使用します。値が変化しても再レンダーは発生しません。表示するUIにはstateを使用します。
よくある質問
「再レンダーせずに値を保持する」レッスンは無料ですか？
はい。「再レンダーせずに値を保持する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「再レンダーせずに値を保持する」で何を学びますか？
再レンダーを引き起こさずにレンダーをまたいで可変値を保持し、シンプルなカウンターとタイマーIDでuseRefとuseStateを比較します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「再レンダーせずに値を保持する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 再レンダーせずに値を保持する
- DOMノードへのアクセス、計測とフォーカス
- タイマーとIDのための可変Ref