共通点

レンダリングが発生しても、中の値は保持される

相違点

	useState	useRef
値を更新した際のレンダリングの有無	あり	なし
値の更新の仕方	値更新用の関数を用いる	name.current に代入
値の取り出し方	useState を使用する際に指定した変数から取り出す	name.current に格納されている

使用例

useState

生成

/* パターン1：初期値を指定する */
const [number, changeNum] = React.useState(1); // stateを生成 初期値は1

/* パターン2：初期値を指定しない */
const [number, changeNum] = React.useState(); // stateを生成 初期値はなし

更新

/* パターン1：ダイレクトに変更後の値を指定 */
changeNum(3); // numberを3に更新

/* パターン2：値を増やす */
changeNum(value => value + 1); // numberを1増やす

関数の引数に関数を指定することができます。
この場合、引数の関数の引数(value)には現時点の number の値が代入されます。
そして、引数の関数の戻り値が number に代入されます。
(先の例は特殊なパターンなので return が省略されています)

また、state の値を更新するとレンダリングが実行されます。

取り出し

console.log(number);

useRef

生成

/* パターン1：初期値を指定する */
const number = React.useRef(1); // refを生成 初期値は1

/* パターン2：初期値を指定しない */
const number = React.useRef(); // refを生成 初期値はなし

更新

number.current = 3;

取り出し

console.log(number.current); // 出力結果=>3