useRefと仲良くなりたい

👤対象者

• useRefが理解できていない人
• useStateと似てる気がするが

useRefとは何なのか？

/**
 * 
 * @returns 
 * What is useRef
 * refオブジェクトの(React.createRef の戻り値)を返すフック
 * DOMの参照や、コンポーネント内で値を保持できます。
 * useStateとの違いは、useStateはstateを更新するたびに再レンダリングされるが、
 * useRefは再レンダリングされない。
 */

私が知っている使い方だと、時間を計測する機能を作ったり、ダイアログに値を渡すときに使っていましたね。

import React from 'react'

const DateTimeRef = () => {
  const now = new Date().getMilliseconds().toString()
  const ref = React.useRef<string>(now)

  const handleClick = () => {
    window.alert(ref.current)
  }

  return (
    <div>
        <h1>Current Date and Time</h1>
        <p>{now}</p>
        <button onClick={handleClick}>Show Date and Time</button>
    </div>
  )
}

export default DateTimeRef

コードの説明をすると

useRefは初期値を受け取り、currentプロパティを持つオブジェクトを返します。
ref.currentは、参照しているDOM要素や値を指します。
useRefを使用することで、再レンダリング間で値を保持することができますが、値の変更は再レンダリングを引き起こしません。

感想

私が使った感想だと、値を参照して、表示するときに使いましたね。このときに、UIの更新はされていないのが特徴です。