Reactフックの一つであるuseRefは、DOM要素の参照や管理に非常に役立つツールです。
本記事では、useRefの基本的な使い方から、よくある使い方や実践的なサンプル、ベストプラクティスと注意点について詳しく解説します。
目次
useRefとは
useRefは、Reactのフックの一つで、DOM要素や他の値の参照を保持するために使用されます。
useRefは、値が変わってもコンポーネントが再レンダリングされないという特徴があります。
これにより、再レンダリングのたびに新しいオブジェクトが作成されることを防ぐことができます。
基本的な使い方
useRefの基本的な使い方は以下の通りです。
まず、useRefをインポートし、次に必要なDOM要素や値に対してuseRefを使用します。
サンプルコード
import React, { useRef } from 'react';
const MyComponent = () => {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
};よくある使い方と実践的なサンプル
DOM要素のスタイル変更
useRefの代表的な使い方です。
StyleChangeExample.jsx
import React, { useRef } from 'react';
const StyleChangeExample = () => {
const divRef = useRef(null);
const changeColor = () => {
if (divRef.current) {
divRef.current.style.color = 'green';
}
};
return (
<div>
<div ref={divRef} style={{ width: '100px', height: '100px', color: 'red' }}>
ボタンを押すと色が変わる
</div>
<button onClick={changeColor}>文字色変更</button>
</div>
);
};前回の値の保存
useRefは前回の値を保存する用途にも使用されます。
PreviousValueExample.jsx
import React, { useRef, useEffect } from 'react';
const PreviousValueExample = ({ value }) => {
const prevValueRef = useRef(); // useRefを初期化（初期値なし）
useEffect(() => { // useEffectで前回の値を更新
prevValueRef.current = value;
}, [value]); // valueが変わるたびに実行
const prevValue = prevValueRef.current; // 前回の値を取得
return (
<div>
<p>現在の値: {value}</p>
<p>前回の値: {prevValue}</p>
</div>
);
};App.jsx
import React, { useState } from 'react';
import PreviousValueExample from './PreviousValueExample';
const App = () => {
const [value, setValue] = useState(0);
return (
<div>
<PreviousValueExample value={value} />
<button onClick={() => setValue(prevValue => prevValue + 1)}>
Increase Value
</button>
<button onClick={() => setValue(prevValue => prevValue - 1)}>
Decrease Value
</button>
</div>
);
};
export default App;タイマーや外部ライブラリの参照
useRefは、DOM操作以外の用途でも使われることがあります。
サンプルコード
import React, { useRef, useEffect } from 'react';
const TimerExample = () => {
const timerRef = useRef(null);
useEffect(() => {
timerRef.current = setInterval(() => {
console.log('Timer tick');
}, 1000);
return () => {
clearInterval(timerRef.current);
};
}, []);
return <div>タイマーが動作中です。コンソールを確認してください。</div>;
};ベストプラクティスと注意点
ベストプラクティス
- 必要に応じて使用する
- useRefは必要な場合にのみ使用し、不要な使用を避けるべきです。例えば、単純な状態管理にはuseStateを使用する方が適切です。
- 初期値を正しく設定する
- useRefの初期値を適切に設定することが重要です。例えば、nullや初期化されたオブジェクトなどです。
適切な初期値を判断する基準は次の通りです。
- useRefの初期値を適切に設定することが重要です。例えば、nullや初期化されたオブジェクトなどです。
useRefの初期値の判断基準
- nullを初期値として設定する場合
- DOM要素の参照：通常、DOM要素の参照を保持する場合、初期値として
nullを設定します。これは、初期レンダリング時にまだDOM要素が存在しないためです。
- DOM要素の参照：通常、DOM要素の参照を保持する場合、初期値として
- 特定の値を初期値として設定する場合
- 保持したい初期値がある場合：保持したい特定の値やオブジェクトがある場合、その値を初期値として設定します。例えば、カウントや前回の値を保持する場合などです。
- 初期値を設定しない場合
- 値が後で設定されることが前提の場合：初期レンダリング時に値を設定する必要がない場合や、値が後で設定されることが前提の場合、初期値を設定しないことがあります。この場合、初期値は
undefinedになります。
- 値が後で設定されることが前提の場合：初期レンダリング時に値を設定する必要がない場合や、値が後で設定されることが前提の場合、初期値を設定しないことがあります。この場合、初期値は
注意点
- 再レンダリングのトリガーにならない
- useRefの変更はコンポーネントの再レンダリングを引き起こさないため、状態が変わるたびに再レンダリングが必要な場合にはuseStateを使用すべきです。
- currentプロパティの使用
- useRefの値は
currentプロパティに格納されているため、currentを経由して値を取得することを忘れないようにしましょう。
- useRefの値は
まとめ
useRefは、DOM要素の参照や状態の保持に非常に便利なフックです。
本記事では、useRefの基本的な使い方から、よくある使い方や実践的なサンプル、ベストプラクティスや注意点について解説しました。
本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。
それでは、最後までお読みいただき、ありがとうございます。
コメント