はじめに
知り合いのエンジニアにuseStateとuseRefの違いは何？と聞かれて
Reactは実務でも使っていたので、正直そこまで難しい質問ではないと思っていましたが
いざ、聞かれると答えられませんでした
なので、インプットとアウトプットをかねてブログを書こうと思いました！
useState
useStateとは、値が変わったときに画面も更新したいときに使用します
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>
{count}
</button>
countが変わると再レンダリングされ画面も変わります
再レンダリングとは
再レンダリングとはなんのためにあるのでしょうか？
再レンダリングは画面を最新の状態に更新するためにあります
先ほどコードでいうとsetCountで数字が変わると、Reactがコンポーネントを再実行して表示に必要な変更を画面に反映します。
- レンダリング：画面に何を表示するか決める
- 再レンダリング：状態が変わったので、表示内容をもう一度計算する
再レンダリングは、画面を全部つくりなおすことではなく、必要な変更を画面に反映するための仕組み！これが大事！
useRef
useRefは、値を覚えておきたいけど、画面は更新しなくていいときに使う！
const counRef = useRef(0);
const Ref.current += 1;
値は変わりますが、再レンダリングはされないです！
具体的にいつ使う？
例えば、タイマーを管理するときに使用します！
const timerRef = useRef(null);
// タイマー開始
const start = () => {
timerRef.current = setInterval(() => {
console.log("1秒経過");
}, 1000);
};
// タイマー停止
const stop = () => {
clearInterval(timerRef.current);
};
そもそもタイマーとは、指定した時間ごとに処理を実行する仕組みで
今回は1秒ごとにログを表示しています！
では、なぜuseRefを使うのでしょうか？
それは、タイマーを停止するためのIDを覚えておきたいけど、
IDが変わっても画面を更新する必要がないからです。
まとめ
useState：値の変更を画面に反映したい
useRef：値を覚えておくだけでいい
このように使い分けます！
ちなみにuseRefは、入力欄にフォーカスを当てるなど、DOM要素を直接参照するときにも使用します！
わからないことがわかっていく感覚が楽しいですね！ブログを書くことで小さな成功体験がつめるのでプログラミングの勉強が楽しくなっていく感覚があります！✨
今回の学習でわかったのですが、わからないことを調べていくと芋づる式に必要な要素がわかっていなことがわかりました（言葉としては聞いたことあるが、なんのために使用されているのかわからない）
なので、ある程度自分の中で線引きして進めていこうと思います！