ReactにおけるuseRefについて

概要

Reactにおいてレンダリングに不要な値を参照するには、useRefを使用する。もしレンダリングに関係する値を保持する場合にはuseStateを使用する。

まず最初にrefをインポートして、宣言する。

import { useRef } from 'react';
 
const Sample = () => {
	cosnt ref = useRef(0)
}

引数として初期値を代入する。
書き方としてはconst ref名 = useRef(初期値)である。

値を変更する際には以下のように記述する。

ref.current = ref.current + 1 //など

ref.currentで現在の値を参照することができる。

refの注意点として、レンダリング中にrefを変更してはいけない。
変更する場合には必ず、イベントハンドラ内かuseEffect内で行う。
変更していけない理由については公式ドキュメント内で説明がある。

Quote

• 入力値（props、state、context）が同じなら、常に同じ JSX を返さなければなりません。
• 呼び出し順が変わったり、引数を変えて呼び出されたりしても、他の呼び出し結果に影響を与えてはいけません。