導入

useRefとは何ですか

useRef は、値または DOM 要素への永続的な参照を作成できる React フックです。再レンダリングをトリガーする状態を管理するために使用される useState とは異なり、useRef は主に副作用または DOM 要素に直接アクセスするために使用されます。

useRef を使用する理由

useRef フックは次の場合に特に役立ちます:

• DOM 要素への直接アクセス: useRef を使用して DOM 要素への参照を取得すると、再レンダリングをトリガーせずに DOM 要素を直接操作できます。
• 永続的な値を作成する: 状態とは異なり、useRef で作成された値はレンダリング間で保持されるため、再レンダリングをトリガーする必要のないデータを保存するのに最適です。

useRef フックを理解する

useRef フックは、.current プロパティを持つオブジェクトを返します。 useRef を呼び出すと、引数として渡した値への永続的な参照が作成されます。この参照は、返されたオブジェクトの .current プロパティに保存されます。

useRef を使用した参照の作成

参照を作成するには、初期値を指定して useRef を呼び出すだけです。

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

上記の例では、countRef は初期値 0 への参照です。

基準値へのアクセス

参照値にアクセスするには、.current プロパティを使用して countRef オブジェクトを呼び出すだけです

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current  
  }

  return (
    

      
Count: {countRef.current}
      Increment
    
  )
}

export default App

上の例では、ボタンをクリックすると、countRef を増やすインクリメント関数が呼び出されますが、useRef を更新するため、カウントは

Count: {countRef.current}

で更新されません。 useState. のような再レンダリングを引き起こさないようにします。

期待した結果を得るには、コードを以下の例に更新します。

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current  
    setCount(countRef.current)
  }

  return (
    

      
Count: {count}
      Increment
    
  )
}

export default App

useRef の一般的な使用例

DOM 要素に直接アクセスして操作する

useRef フックを使用して HTML 要素にアクセスし、プロパティを変更することができます

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    
  )
}

永続的な値

useState や変数とは異なり、useRef は、キャッシュされたデータや構成設定などの再レンダリング間で値とデータを渡すことができます。

パフォーマンスの最適化

場合によっては、useRef を使用すると、不必要な再レンダリングが回避され、コンポーネントの最適化に役立ちます。たとえば、項目の大きなリストをレンダリングするコンポーネントがある場合、useRef を使用してそれをキャッシュし、変更された項目のみを変更して再レンダリングできます。

ベストプラクティスと考慮事項

• レンダリング中に ref.current の書き込み または読み取り を行わないでください
• ref.current プロパティを変更できます
• ref.current プロパティを変更すると、React はコンポーネントを再レンダリングしません
• 情報はコンポーネントの各コピーに対してローカルです（共有される外部の変数とは異なります）。（通常の変数とは異なり、再レンダリングの間に）情報を保存できます。レンダリングごとにリセットされます)。
• 代わりにイベント ハンドラーまたはエフェクトから参照を読み書きできます。
ref による dom の操作

カスタム コンポーネントに ref を渡します。

このように独自のコンポーネントに ref を渡そうとすると

const inputRef = useRef(null); を返します。

const inputRef = useRef(null);

return ;

コンソールにエラーが表示される可能性があります:

警告: 関数コンポーネントに参照を与えることはできません。この参照にアクセスしようとすると失敗します。 React.forwardRef() を使用するつもりでしたか?

この問題を解決するには、次のようにカスタム コンポーネントを forwardRef でラップします。

const inputRef = useRef(null); return ;

const inputRef = useRef(null);

return ;

カスタムコンポーネント:

import { forwardRef } から 'react'; const MyInput = forwardRef(({ value, onChange }, ref) => { 戻る （ ); }); デフォルトの MyInput をエクスポートします。

const inputRef = useRef(null);

return ;

結論

useRef は、主に再レンダリング間のデータのキャッシュや DOM の要素へのアクセスなどの副作用の用途に使用される強力なフックです。これは、パフォーマンスを最適化し、React アプリケーションの特定の機能を実現するための優れたツールです。