useRef

定義

useRef は、再レンダリングをまたいで値を保持する React フックです。const ref = useRef(initialValue) と書くと { current: initialValue } という 1 つのオブジェクトが返り、以降のレンダリングでも同じオブジェクトが使われます。ref.current を書き換えても再レンダリングは起きません。

詳細

用途は大きく 2 つあります。
1 つは、タイマー ID や直前の値のように「保持したいが画面には出さない」データの置き場です。
もう 1 つは DOM 操作で、<input ref={ref} /> のように JSX の ref 属性へ渡すと、マウント後に ref.current へ実際の DOM 要素が入り、focus() などを呼べます。

ref.current はレンダリング中に読み書きしないのが原則です。
レンダリングの結果に影響する値は useState で持ち、画面に反映しない値だけを useRef に置きます。

よくある誤解

• 「useRef に入れた値を変えれば画面が更新される」：更新されません。
  表示を変えたいなら useState を使います。
• 「ref.current は常に DOM 要素」：初期値は useRef に渡した値で、DOM が入るのはマウント後です。
  初回レンダリング中や条件付き描画では null のままになります。

関連

current が null になる原因は React useRef の current が null で参照できない、状態を持つフックは useState、副作用は useEffect を参照してください。