4章、6章とReactをインプットしてきましたが、Reactのフックの違いをいまいちつかめていませんでした。
10章であらためてインプットしなおすと、少し違いがわかった気がしたのでアウトプットしてみようと思います！

useState

状態を管理するフック
値を変更するたびに再レンダリングされる

イメージ

ボタンをクリックするたびにカウントが増える
入力フォームの内容を保存する

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

useRef

参照(reference)の保持 / 値の保存をするフック
レンダリングが発生しない
一回のみ実行したい処理の時に使用する

イメージ

前回の値を記憶しておく
カウントはしたいけど画面は変えたくない

import { useRef, useEffect } from 'react';

const InputFocus = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
};

つまり、、、

useStateとuseRefはレンダリングが発生するかどうかが、大きな違いなのだと認識しました！！

useEffect

副作用を自分でコントロールするためのフック
第二引数を空配列にすると初回レンダリング時のみ、依存配列を渡すと、その値に変化があった時に実行される

import { useState, useEffect } from 'react';

const Timer = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <p>{count} 秒経過</p>;
};

副作用とは

エラーではないけど、意図しない処理の実行
API、ローカルストレージ、DBからデータを取得するときにおこる
ex)

データの変更
処理の再実行

※エラーとは違い、プログラムが停止しないことが多い

たとえば、APIをfetchするときにuseStateを使用すると無限ループを起こしてしまう。。
（API破産という言葉があるそうです😇）
そんなときに、useEffectを使用し依存配列を渡すことで、レンダリングするタイミングをコントロールするときに使うことができます。

以上です！
言葉にすると、まだまだ理解が浅いのは否めないですが、
自分なりに少し違いが分かったので共有してみました！

ここまで読んでいただきありがとうございました！！