【第一回】個人的によく使うReact Hooksメモ（useState / useEffect / useRef / useContext）

はじめに

異業種からIT企業に転職して半年以上の初心者です
今月は、Reactでは欠かせないHooksについてメモ程度にまとめてみました。
使用頻度が中程度くらいの関数について毎回、あれ？あってるっけ？と思って検索してしまいがちなので、復習がてらその手間を省くための個人的チートシートです。
個人的使用頻度が高いものを4つピックアップしています。

useState

状態を管理するために使用するもので、フロント側でその値を動的に変えて保持しておくことができる。

健康管理状態ロジック

function yourHealthCondition() {
  const [ health, setHealth ] = useState('');

  return (
    <div>
      <input
        type="text"
        value={health}
        onChange={(e) => setHealth(e.target.value)}
      />
      <p>今日の体調：{health}</p>
    </div>
  );
}

useEffect

レンダリング後に実行したい処理の時に使用する。

【例】

• apiを呼び出してサーバーから値を取得する
• 状態更新による無限レンダリング（無限ループ）回避のため
• 何かの変更をきっかけに処理を起こしたい

引数別の使い分け

• useEffect(function())：毎レンダリング後に実行
• useEffect(function(), [])：初回レンダリング時のみ実行
• useEffect(function(),[a])：aが変化するたびに実行
  →memo：第二引数をとらずに実装してしまい無限ループへ陥ることがありました

userプロフィール取得

export function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState<{ name: string } | null>(null);

  useEffect(() => {
    // 1. レンダリング後にデータを取得
    fetch(`https://xxyyzz.com/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data));

  }, [userId]); // 2. userId が変更された時だけ再実行される

  if (!user) return <p>読み込み中...</p>;
  return <h3>{user.name}</h3>;
}

useRef

裏側で値を保持しておきたいときに使う。
画面には反映されず、処理の途中で参照する目的などで使用される。

useStateとの違い
useStateは変化があるたびにset関数を呼び出し、そのたびに画面が更新されますが、一方でuseRefはref.currentを書き換えるだけでオブジェクトの中身が置き換わるため、関数の再実行は発生しない。
処理中に値を参照したいだけなら、useRefを使用した方がコストがかからずに済む。
逆に、画面に反映させる必要がある値をuseRefで設定してしまうと値が更新されているのにもかかわらず、画面が古いままになるためバグが発生してしまう。

マウス座標追跡（画面非表示）

function Tracker() {
    const posRef = useRef ({ x:0, y:0 });

    useEffect(() => {
        const handler = (e) = {
            posRef.current = { x:e.clientX, y:e.clientY };
        };
        window.addEventListener('mousemove', handler);
        return () => window.removeEventListener('mousemove', handler);
    }, [] );

    return <div>マウス位置は表示しない</div>;
}

useContext

親のコンポーネントから子のコンポーネントに値を受け渡すことができる。
通常は子コンポーネント一つ一つ経由して目的の階層まで値をバケツリレーしなければならない。
しかし<xxxContext.Provider value={yyy}>と子コンポーネントを囲むことで、値をバケツリレーしなくても直接取り出すことができる。

親コンポーネント

export function App() {
  const [user, setUser] = useState("太郎");
  const userContext = createContext('');

  return (
    // valueに入れたデータが、配下の全コンポーネントに届く！
    <UserContext.Provider value={user}>
      <Header />
      <MainContent />
    </UserContext.Provider>
  );
}

どこかの階層の子コンポーネント

function UserProfile() {
  // Providerが配信しているデータを直接取得
  const user = useContext(UserContext); 

  return <p>ログイン中: {user}</p>;
}

個人的にuseContextで参考になった記事です

まとめ

使用頻度の高いものや実装案の一つとしたものを今回は上げてみました。
分かっていても使いこなせるようにならないとだと実感しています。
そのうち第二回も更新します！