React再入門: useRef編

mu-suke

ゴール

useRefとは何か自分の言葉で説明できるようになること
useRefを使用した例を1つ挙げられること

mu-suke

まずは公式ドキュメントを読む

mu-suke

公式ドキュメントからわかったことは以下

レンダーごとに同じrefオブジェクトを返す
refオブジェクトの生存期間はコンポーネントの存在期間と同じ
コンポーネントの再描画を引き起こさないので注意が必要
refと言ったらDOMへの直接アクセスを想像するが、公式では副作用の保存のために使用することを推奨している

mu-suke

先生（ChatGPT）にも聞いてみる

mu-suke

使用例

一番簡単なカウンターコンポーネント

prevCountRefが変更されても再描画が起こらない
setCountで再レンダリングが起こってもrefの値を保持し続ける

import React, { useRef, useState } from 'react'

const Counter: React.FC = () => {
  const [count, setCount] = useState(0)
  const prevCountRef = useRef(0)

  const handleClick = () => {
    prevCountRef.current = count
    setCount(count + 1)
  }

  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCountRef.current}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  )
}

export default Debug

mu-suke

useRefとは何か

コンポーネント内で与えた変更によってコンポーネントの再レンダリングをしたくない場合に利用できる

useRefを使用した例を1つ

このスクラップは2023/03/20にクローズされました