React入門！React hooksの使い方

React Hooksは、React 16.8以降に導入された機能で、関数コンポーネント内での状態やライフサイクルの管理、副作用の処理などを行うための手法です。クラスコンポーネントでは、コンポーネントのマウントやアンマウント、更新時などのライフサイクルメソッドが必要だったが、HooksではuseEffectフックを使用することでシンプルな書き方で同じ処理を行うことが出来ます！よく使用するHooksの紹介、使い方を記載していきます。

React Hooksの種類（一部記載）

useState: 状態の管理

useEffect: 副作用の処理とライフサイクル管理

useContext: グローバルな状態の共有

useRef: DOM要素や値の参照

useCustomHook:カスタムフックの作成

React Hooksの使い方

React Hooksは関数コンポーネント内で使用出来ます。よく使用するHooksの中から一部紹介していくので是非使ってみてください。

useState: 状態の管理

import {　useState } from "react";

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
　　　　<div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
  </div>
  );
}

useStateフックを使用してcountという状態を宣言し、数値の場合は初期値を0に設定します。
countがState名でsetCountが値を更新するための関数として使用していきます。
そして、ボタンクリック時にincrement関数を呼び出し、setCount関数を使用してcountの値を更新しています。

useEffect: 副作用の処理とライフサイクル管理

import {　useEffect } from "react";

const Timer = () => {
  useEffect(() => {
    // コンポーネントがマウントされた時にタイマーを開始する
    const intervalId = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    // Clean-up関数を返すことで、コンポーネントがアンマウントされる時にタイマーを停止する
    return () => {
      clearInterval(intervalId);
    };
  }, []); // 第2引数に空の配列を渡すことで、初回のマウント時のみ実行される
  return (
   <div>
     <p>Elapsed Time: {seconds} seconds</p>
   </div>
 )
}

useEffectではコンポーネントがマウントされた後に呼び出される（DOMに追加されたあと）
簡単に説明すると、画面が表示された後に発火する関数っていうイメージです！
関数内に実行したい式を記載し、終了時の処理はreturn()内に書きます。
デフォルトでは画面が表示された後に発火しますが、[]内にいつ実行するのかを決める事が出来ます。
[]に変数を入れた場合、その変数が変わるたびに発火します。

useContext: グローバルな状態の共有

import {　useContext } from "react";

const ThemeContext = React.createContext('light');

const ExampleComponent = () => {
  // useContextフックを使用してグローバルなテーマの値を取得する
  const theme = useContext(ThemeContext);

  return <p>Current Theme: {theme}</p>;
}

useContextはReactのコンポーネント間でデータを共有する事が出来ます。
React.createContextでコンテキストを作成、各コンポーネントからuseContextをインポートして定義することで使用できる。
Contextは使い方を覚えると非常に便利なので是非使ってみてください！

終わりに

今回はReactHooksの種類、使い方についての解説でした！
他にも様々なHooksがあるので少しずつ使って調べていくと覚えると思います。
次回はTypeScriptの基礎について書く予定です！