React Hooks

# React Hooksとは
React Hooksとは，React16.8から追加されたもので，Reactのstateやライフサイクルの機能などをクラスコンポーネントではなく，**関数コンポーネント**でも利用できるようにする機能．

# Reack Hookのメリット
Reactの公式では，クラスコンポーネントを使うより，hookを用いて関数コンポーネントの方を推奨している．その理由としては，同じ機能を実装するにもコード量が少なく，読みやすいという点がある．

**クラスを使った場合**
```jsx
import React from 'react';

class MessageClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hello, Click the button!",
    };
  }

  updateMessage() {
    this.setState({ message: "Button clicked!" });
  }

  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.updateMessage()}>Click me</button>
      </div>
    );
  }
}

export default MessageClass;
```
クラスコンポーネントでは，stateの管理に`this.state`や`this.setState`などthisバインディングを使ってメソッド内でコンポーネントのプロパティやメソッドにアクセスする．

**関数コンポーネント(Hooksを使用)**
```jsx
import React, { useState } from 'react';

const MessageFunction: React.FC = () => {
  const [message, setMessage] = useState("Hello, Click the button!");

  const updateMessage = () => {
    setMessage("Button clicked!");
  };

  return (
    <div>
      <p>{message}</p>
      <button onClick={updateMessage}>Click me</button>
    </div>
  );
}

export default MessageFunction;
```
関数コンポーネントでは`useState`というHookを利用して，関数内で変数を宣言してstateを操作する．
thisバインディングを利用しないため，コードがシンプルで読みやすいということがわかる．

# Hooksの注意点
1. 関数コンポーネントでのみ利用可能(クラスコンポーネントでは利用不可)
2. Hookを呼び出すのはトップレベルのみ
→Hookをループや条件分岐，ネストされた関数内で呼び出してはいけない．

以下のような場合はエラーが発生する．
    

```jsx
const MessageFunction: React.FC = () => {
	if(someCondition){
	  const [message, setMessage] = useState("Hello, Click the button!");
	}
  return (
    <div>
      <p>{message}</p>
      <button onClick={updateMessage}>Click me</button>
    </div>
  );
}
```
if文の中でHookを利用しているため，エラーが発生してしまう．

# 基本的なHook
この記事では公式に基本的なhookとして挙げられた三つを紹介するが，他にも様々な便利なHookがある．これらを活用することで効率の良い開発を行うことができる．

## useState
状態を管理するためのHooks．
コンポーネント内で状態stateを保持し，更新することもできる．
```jsx
import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
```

## useEffect
副作用を処理するためのHooks．
コンポーネントがマウント，アンマウント，更新されるタイミングで副作用を処理することができる．

:::note info
副作用とは
プログラムの実行結果に影響を与えるが、関数の戻り値として直接返されないアクションや変更のこと(外部データの読み書き，画面の更新，ログ出力，タイマー処理など)
:::
```jsx
import React, { useState, useEffect } from 'react';

function DataFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <ul>
        {data.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}
```
**Reactにおけるマウント(Mount)とアンマウント(Unmount)について**
マウントとはコンポーネントが初めてDOMに描画されること．マウントされると，コンポーネントを表示されるために必要な初期化や設定が行われる．
一方，アンマウントとはコンポーネントがDOMから取り除かれること．コンポーネントに関連するリソースの解放やクリーンアップなどが呼び出される．


## useContext

コンテキストを使用するためのHooks．
コンポーネントツリー内でのグローバルなデータの共有を容易にする．

```jsx
import React, { useContext } from 'react';

const ThemeContext = React.createContext();

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <div style={{ color: theme.color }}>Themed Text</div>;
}
```
親コンポーネントから子コンポーネントへデータの受け渡しに”props”を利用するが，コンポーネントが増え，何層にもなるとデータの受け渡しが大変である．

useContextを用いることで，データをグローバルに定義することができる．つまり，<ins>直接親子関係にないコンポーネントからでもデータを取得することができる</ins>ということである．