<aside> 💡

チャプター完了時点のソースコード

https://github.com/craftgear/react-hands-on/tree/ch4

</aside>

• Reactが標準で提供するフック 16個

  https://react.dev/reference/react/hooks

• 主に使うのは以下の4つ

  • useState
  • useReducer
  • useRef
  • useEffect

• ある時点での値を記憶しておく仕組み

• 覚える値の種類と値の更新方法の違いで色々種類がある

• レンダリング時に毎回同じフックが同じ順番で呼び出される必要がある

  • if 文で分岐はできない

• サードパーティ製のカスタムフック

  https://github.com/streamich/react-use

useState

1. React Developer Toolでレンダリング表示を有効にする

2. <div className="card">...</div> を <Counter/> コンポーネントとして切り出す

   1. setCount((count) => count+1)を setCount(count+1) に変更しておく。

    import { useState } from 'react';
    
    export const Counter = () => {
      const [count, setCount] = useState(0)
   
      return (
        <div className="card">
          <button onClick={() => setCount(count + 1)}>
            count is {count}
          </button>
          <p>
            Edit <code>src/App.jsx</code> and save to test HMR
          </p>
        </div>
      )
    }
   

3. レンダリングの違いを確認する

4. <Counter /> をコピーして <ObjectCounter /> を作成し、useStateで保存する値をオブジェクトに変更する。

    import { useState } from 'react';
   
    export const ObjectCounter = () => {
      const [state, setState] = useState({ count: 0 });
   
      return (
        <div className="card">
          <button
            className="btn btn-primary text-xl"
            onClick={() => {
              state.count = state.count + 1;
              setState(state);
            }}
          >
            count is {state.count}
          </button>
          <p>
            Edit <code>src/App.tsx</code> and save to test HMR
          </p>
        </div>
      );
    };
   

5. オブジェクトの値を直に書き換えてもコンポーネントが再レンダリングされないことを確認する。

   1. onClickで新規オブジェクトを作成してsetするとコンポーネントが再レンダリングされることを確認する

6. previousValueを使って振る舞いの違いを確認する

   1. setCount(count+1)を2回呼んでも2ずつ増えないことを確認する
   2. previousValueを使って2ずつ増えるように変更する

7. 新たに <Note /> コンポーネントを作成する。

   export const Note = () => {
   	return <p className="text-3xl">Note</p>
   }