🐕
useRefとuseStateの違い
イマイチしっくりこなかったので比較
useRefとuseStateの違いについて。
useState:
useStateは、コンポーネントの状態を管理するために使用されます。
状態が変更されると、コンポーネントは再レンダリングされます。
useStateを使用することで、関数型コンポーネント内で状態を持つことが可能になります。
例:
const [count, setCount] = useState(0);
useRef:
useRefは、参照を保存するために使用されるフックです。
主にDOM要素への参照や、再レンダリング間で値を保持したい場合などに使用されます。
useRefの値が変更されてもコンポーネントの再レンダリングは発生しません。
例:
const inputRef = useRef(null);
ざっくりとした違いは
useState: コンポーネントの状態を管理し、値が変更されると再レンダリングが起きる。
useRef: 参照値を保持し、値の変更が再レンダリングを引き起こさない。
うーん、なんだがイマイチよくわかりませんね
作ってみよう
よくあるカウンターです
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>増加</button>
<button onClick={() => setCount(count - 1)}>減少</button>
</div>
);
}
export default Counter;
フォーカスするやつ
import React, { useRef } from 'react';
function TextInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>フォーカス</button>
</div>
);
}
export default TextInput;
わかりにくいですがクリックするとフォーカスします
Reactは簡単なようで難しいです
とにかく読み込み順とキャッシュとの闘いです・・・!
いっぱいつくってみるとしっくりくるかもです。
Discussion