2022-1-10

[React] DOMに紐付けたrefが非nullになるタイミング

Ref と DOM – React

コンポーネントがマウントされると React は current プロパティに DOM 要素を割り当て、マウントが解除されると null に戻します。ref の更新は componentDidMount または componentDidUpdate ライフサイクルメソッドの前に行われます。

クラスコンポーネント時代の例だが、マウントタイミング、具体的には componentDidMount の前に更新されるとの記述あり。

なので、関数コンポーネントにおいてもマウントタイミングには非nullになっていると認識しておいて良さそう。なので、

export const SomeInput = () => {
  const ref = useRef<HTMLInputElement>(null)

  // NG（nullになっているケースがある）
  ref.current!.value = '10'

  const onBlur: React.FocusEventHandler<HTMLInputElement> = () => {
    // OK（これが呼ばれるタイミングでは非nullなので）
    ref.current!.value = '10'
  }

  return <input ref={ref} />
}

こんな感じになる。（普通やらないようなコードだが、あくまで例として）