5分で読むReact豆知識 | 入門 | 第6回: 代表的なHooks

# はじめに
このシリーズは、Reactの公式ページなどから特に重要と感じたトピックを選び出し、何度でも読み返せるよう簡潔にまとめたものです。:orange_book:

**進捗管理には「いいね」か「ブックマーク」がお勧め**
さらに僕のモチベーションアップになります！:thumbsup:よろしくお願いいたします！:thumbsup:

**[シリーズ一覧はこちら](https://qiita.com/mr_noppo/items/9f2841fd0bc574a4685c)**

# Hooksとは
React 16.8以降で導入された新機能であり、**関数コンポーネント内でクラスコンポーネントの多くの機能（状態の保持、ライフサイクルイベントへのアクセス）を使用できるようにした**ものです。

#### １.useState
**stateとその更新関数を提供するHook**です。
プリミティブ値やオブジェクト/配列などを格納できます。
**stateはレンダリング間で保持**されます。
**更新関数を使用してstateを更新するとコンポーネントが再レンダリング**されます。
```
const [count,setCount] = useState(0);
```

#### ２.useEffect
**React外の処理を行いたい場合に利用されるHook**で、副作用を管理します。

・**依存配列あり**: 配列内の値が変更された場合、副作用が実行されます。
・**依存配列が空**: コンポーネントの初期レンダリング時にのみ副作用が実行されます。
・**依存配列なし**: すべてのレンダリング後に副作用が実行されます。

```react
useEffect(() => {
  // API呼び出し、イベントリスナーの登録/解除など
}, [trigger]);
```

#### ３.useRef
**レンダリング間で値を保持したいが、再レンダリングのトリガーにさせたくない値**に対して使用します。

```react
const renderCount = useRef(0);
```

#### ４.useCallback
**依存する値が更新された場合にのみ、関数を再生成**します。
通常、propsとして関数を渡す場合に`memo`と併用されます。

```react
const callBack = useCallback(()=>{
    //triggerを使った処理
}, [trigger])
```

##### memo
**propsで渡される値や参照をキャッシュ**します。
propsに変更がない限り、親コンポーネントの再レンダリングが子コンポーネントに影響を与えません。

```react
const Hello = memo(({ name }) => {
return (
    <h1>
        Hello {name}
    </h1>
)})
```

#### 5.useMemo
**関数の計算結果をキャッシュ**することで、計算コストの高い処理を効率化します。
```react
const [count, setCount] = useState(0);
const result = useMemo(() => double(count), [count]);
```

#### 6.useReducer
**より複雑な状態ロジックを管理するためのHook**で、useStateよりも詳細な制御が可能です。

```react
const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
  }
  throw Error('Unknown action: ' + action.type);
}

const [state, dispatch] = useReducer(reducer, initialState);
```

#### 7.useContext
contextを参照するために使用します。

##### 7-1.contextとは
ツリー構造単位でstateをグローバル化します。
contextを使用すると処理が複雑になることもあるため、propsやchildrenとしてJSXを渡す方法を優先的に考えましょう。

コンポーネントツリー全体で**データをグローバルに利用できる**ようになります。
大規模なアプリケーションにおいては、**コンポーネント間でのデータの受け渡しが複雑になる可能性**があります。そのため、**可能な限りPropsやChildrenを通じてデータを渡す**方法を優先的に検討することが推奨されます。

##### 7-2.contextの使用手順
1：**Contextの作成**

**データが必要とされる最も上位のコンポーネントで初期化**します。
階層ごとに異なる値を提供したい場合は、**providerを使用し値を再定義**します。
providerを使用しない場合は、デフォルト値が使用されます。

```react
import { createContext } from 'react';
export const LevelContext = createContext(1);
```


2：**Contextの利用**

**使用したいコンポーネント内でuseContextを呼び出し**、Contextから値を取得します。
取得できる値は、そのコンポーネントに最も近いProviderから提供される値、またはデフォルト値です。

```react
import { useContext } from 'react';
import { LevelContext } from './LevelContext';

const level = useContext(LevelContext);
```

3：**Providerでの値の管理**

Providerを使用して、指定されたコンポーネントツリーの一部に対して**特定の値を提供**します。

```react
import { LevelContext } from './LevelContext';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}
```

## 参考サイト・書籍
より詳しく学びたい方はこちら
### Hooksについて
https://bookmeter.com/books/16795497

### Contextについて
https://ja.react.dev/learn/passing-data-deeply-with-context