【React】useStateとuseRefの違い 【初心者にも分かりやすく】

はじめに

恥ずかしながら実業務をしてる際に、題目の「useStateとuseRefの違い」
を答えることができなかったので今回はまとめさせて頂きます。

文法覚えただけなのほんまに良くない

useStateとは

useStateとは、関数コンポーネントのstateを保持したり、更新したりするためのフックになります。
useStateはReactのコンポーネントの状態管理に使用されておりstateが変更されると再レンダリングされます。

App.js

import { useState } from 'react'
import './App.css'

function App() {
  const [count,setCount] = useState(0) 

  const handleClick = () => {
    setCount(prev => prev + 1)
  }

  return (
  <>
    <h1>useState</h1>
    <button onClick={handleClick}>count is {count}</button>
  </>
  )
}

export default App

上記のコードでボタンをクリックしていくとcountが増えていく簡易的なページが作成されます。

 const [count,setCount] = useState(0) 

こちらは第１引数に現在の値と、第２引数に更新関数を返しています。
countにはuseStateの引数が初期値として格納されます。

useRefとは

useRefは、DOMを参照して要素にアクセスするためのフックになります。
また、DOMの参照に使われることが多いですがReactコンポーネント内の値に対して参照を作成するために使用することも可能です。

こちらもサンプルコードで使い方を説明します。

App.js

import { useRef } from "react";
import "./App.css";

function App() {
  const ref = useRef(null);

  const handleRef = () => {
    console.log(ref);
    console.log("input", ref.current);
    console.log("value", ref.current.value);
    console.log("width", ref.current.offsetWidth);
  };

  return (
    <div className="App">
      <h1>hello react</h1>
      <input type="text" ref={ref}></input>
      <button onClick={handleRef}>useRef</button>
    </div>
  );
}

export default App;

コードについて一部説明します。

 const ref = useRef(null);

上記は初期値がnullの、inputを参照をref変数に保持するコードになります。
そしてボタンをクリックしてhandleRefを発火させると...

上記の出力の通りに通りに、DOM要素にアクセスしていることがわかるかなと思います。

また、useRefについて補足するとRefオブジェクト({current: initialValue})を生成してその値をメモ化しているのが実態になります。

そんで、結局違いはどこなの？

stateは変更されると再レンダリングされますが、同じく値を保持できるrefの値を変更しても再レンダリングがトリガーされないというところが最大の違いです！

概要としてuseStateはコンポーネント内での状態管理に使用し、useRefはDOM要素への参照や値の保存に使用されると覚えれば大枠が理解できるかなと思います。

参照