正解は コンソールには増加した値が出るが、画面の表示は0のまま です。useRef が返すオブジェクトの .current を書き換えても、React は再レンダリングを起こしません。そのため内部的にはカウントが増えていても、JSX に埋め込まれた {count.current} は再評価されず、画面は初期値の 0 のままです。エラーにはならず（useRef は任意の値を保持できる）、コンソールには 1, 2, 3... と正しく出力されます。画面も更新したいなら useState を使う必要があります。useRef と useState はどう使い分けるのか「変更したら画面に反映したい値」は useState、「変更しても再描画したくない値」は useRef、というのが基本的な使い分けです。useState はセッター関数を呼ぶと React に「状態が変わった」ことを通知し、再レンダリングがスケジューリングされます。一方 useRef は単なる「書き換え可能な箱」を提供するだけで、React はその中身を監視していません。useRefが活躍する具体的な場面DOM要素への参照: <input ref={inputRef} /> としてフォーカス制御やスクロール位置の取得に使うタイマーIDの保持: setInterval の戻り値を保存して、後で clearInterval するのに使う。useState だと毎回再レンダリングが走って無駄前回の値の記憶: useEffect 内で「前回のpropsと今回のprops」を比較したいときの保存場所レンダリングに関係ない可変値: 例えば「このコンポーネントは何回マウントされたか」のようなデバッグ用カウンタよくある勘違い「useRefの値が変わったら何かしたい」と思って useEffect の依存配列に ref.current を入れるのは効きません。React は ref の変更を検知しないため、依存配列に書いても発火しないのです。値の変化に応じて何か処理したいなら、それはもう useState の出番だと考えてください。