😽

useRefとは

2023/03/16に公開

useRef の使い道

コンポーネントで何か情報を記憶しておきたい時に、useState を使いたいと思いますが、
useState で情報を保存するとき、再レンダリングが走ります。
その再レンダリングを起こしたく無い時に useRef を使います。

How to use useRef

コンポーネント内で useRef フックを呼び出し、参照する初期値を唯一の引数として渡します。
たとえば、値 0 への参照は次のとおりです。

const ref = useRef(0);

useRef()を実行すると下のようなオブジェクトが返却されます。

{
  current: 0; // The value you passed to useRef
}

プロパティを介してその参照の現在の値にアクセスできます。このオブジェクトは意図的に変更可能です。
書き込みができます。

import { useRef } from "react";

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert("You clicked " + ref.current + " times!");
  }

  return <button onClick={handleClick}>Click me!</button>;
}

こうして使うことができます。
現在数字を扱っていますが、文字列オブジェクト関数などなんでも扱うことができます。

stateとは異なり、refは単なるJavaScriptオブジェクトです。

GitHubで編集を提案

Discussion