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は簡単なようで難しいです
とにかく読み込み順とキャッシュとの闘いです・・・！
いっぱいつくってみるとしっくりくるかもです。