React useRef
useRefフックを使用すると、レンダリング間で値を保持できます。
更新時に再レンダリングを引き起こさない可変値を格納するために使用できます。
DOM要素に直接アクセスするために使用できます。
再レンダリングを引き起こさない
アプリケーションが何回レンダリングされたかをカウントしようとすると、useStateフック自体が再レンダリングを引き起こすため、無限ループに陥ります。
これを回避するには、useRefフックを使用します。
例：
useRefを使用し、アプリケーションのレンダリングを追跡します。
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";
function App() {
const [inputValue, setInputValue] = useState("");
const count = useRef(0);
useEffect(() => {
count.current = count.current + 1;
});
return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<h1>Render Count: {count.current}</h1>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
useRef()は1つの項目しか返しません。これは、currentというオブジェクトを返します。
useRefを初期化するときは、初期値useRef(0)を設定します。
これは、const count = {current: 0}を実行するようなものです。count.currentを使用してカウントにアクセスできます。
これをコンピューターで実行し、入力して、アプリケーションのレンダリング数が増加することを確認してください。
DOM要素へのアクセス
一般的にはReactにすべてのDOM操作を処理させたいと考えています。
しかし、useRefを使用しても問題が生じない場合もある。
Reactでは、ref属性を要素に追加して、DOMで直接アクセスします。
例：
useRefを使用し入力をフォーカスするには:
import { useRef } from "react";
import ReactDOM from "react-dom/client";
function App() {
const inputElement = useRef();
const focusInput = () => {
inputElement.current.focus();
};
return (
<>
<input type="text" ref={inputElement} />
<button onClick={focusInput}>Focus Input</button>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
stateの変化の追跡
useRefフックを使用して、以前の状態値を追跡することもできます。
これは、レンダリング間でuseRef値を保持できるためです。
例：
useRefを使用し、以前の状態値を追跡するには:
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";
function App() {
const [inputValue, setInputValue] = useState("");
const previousInputValue = useRef("");
useEffect(() => {
previousInputValue.current = inputValue;
}, [inputValue]);
return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<h2>Current Value: {inputValue}</h2>
<h2>Previous Value: {previousInputValue.current}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
今回は以下の組み合わせuseState useEffect useRefを使用し、以前の状態を追跡します。
useEffectでは、入力フィールドにテキストを入力してinputValueが更新されるたびに、useRefの現在値を更新しています。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。