React hook入門 - useStateやuseEffectを使ってみよう

React hooksについて

React hooksは、React 16.8から導入された新しい機能です。React hooksを使用することで、Reactコンポーネント内でstateやライフサイクルメソッドを使用できるようになります。これにより、クラスを使用しなくても、Reactコンポーネントをカプセル化したり、状態を管理したり、副作用を処理したりすることができます。

import React, { useState } from 'react';

次に、React hookを使用するためには、React hookを使用する関数を定義する必要があります。React hookを使用するには、React hookを使用する関数を定義する必要があります。

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React hookを使用することで、Reactコンポーネントをよりスマートかつスケーラブルにすることができます。

React hooksを基礎から理解する (useState編)

React hookのuseStateは、Reactコンポーネント内で状態を管理するために使用されます。useStateは、Reactコンポーネント内で状態を扱うための関数であり、第1引数に初期状態を、第2引数に状態を更新する関数を受け取ります。

次の例は、Reactコンポーネント内でcountという名前の状態を管理する方法を示しています。

import React, { useState } from 'react';

function Example() {
  // useStateを呼び出し、初期状態を0とする状態変数countと、その状態を更新する関数setCountを定義する
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

この例では、useState関数を使用して、初期状態を0とする状態変数countと、その状態を更新する関数setCountを定義しています。count変数は、Reactコンポーネント内で使用できるようになります。また、setCount関数を使用することで、状態を更新することができます。

React hooksを基礎から理解する (useEffect編)

React hookのuseEffectは、Reactコンポーネント内で副作用を処理するために使用されます。副作用とは、APIリクエストやタイマーの設定、DOMの操作など、コンポーネントのレンダリングとは独立して実行される処理のことを指します。

useEffectは、Reactコンポーネントがマウントされたり、アンマウントされたり、更新されたりするたびに実行されます。

次の例は、useEffectを使用して、Reactコンポーネント内でタイマーを設定する方法を示しています。

import React, { useState, useEffect } from 'react';

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

  // コンポーネントがマウントされたときに1秒ごとにカウントを増やすタイマーを設定する
  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    // コンポーネントがアンマウントされるときにタイマーをクリアする
    return () => clearInterval(interval);
  }, [count]); // countが変わるたびにタイマーをリセットする

  return (
    <div>
      <p>You have been on this page for {count} seconds.</p>
    </div>
  );
}

この例では、useEffect関数を使用して、Reactコンポーネントがマウントされたときに1秒ごとにカウントを増やすタイマーを設定しています。また、useEffect関数の第2引数に、依存する状態を指定することで、状態が変化したときに副作用を実行するようにすることができます。

React hooksを基礎から理解する (useContext編)

React hookのuseContextは、Reactコンポーネント内でコンテキストを使用するために使用されます。コンテキストは、Reactアプリケーション内で共通のデータや機能を提供するための仕組みです。

useContextは、Reactコンテキストを受け取る関数であり、第1引数にコンテキストを指定することで、コンテキストの値を取得することができます。

次の例は、useContextを使用して、Reactコンテキストを使用する方法を示しています。

import React, { useContext } from 'react';

// コンテキストを定義する
const MyContext = React.createContext();

// コンテキストを提供するコンポーネントを定義する
function MyProvider(props) {
  const value = {
    name: 'John Doe',
    age: 30,
  };
  return (
    <MyContext.Provider value={value}>
      {props.children}
    </MyContext.Provider>
  );
}

// コンテキストを使用するコンポーネントを定義する
function MyComponent() {
  // useContextを使用して、コンテキストの値を取得する
  const context = useContext(MyContext);
  return (
    <div>
      <p>My name is {context.name} and I am {context.age} years old.</p>
    </div>
  );
}

// コンテキストを提供するコンポーネントをレンダリングする
function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

この例では、MyContextという名前のコンテキストを定義し、MyProviderコンポーネントで提供しています。次に、MyComponentコンポーネントでは、useContext関数を使用して、MyContextコンテキストの値を取得しています。

React hooksを基礎から理解する (useReducer編)

React hookのuseReducerは、Reactコンポーネント内で状態を管理するために使用されます。useReducerは、useStateと似ていますが、より複雑な状態管理を行う場合に便利です。

useReducerは、第1引数にリデューサ関数を、第2引数に初期状態を受け取ります。リデューサ関数は、状態を更新するための関数であり、状態を受け取り、新しい状態を返す関数です。

次の例は、useReducerを使用して、Reactコンポーネント内でカウントを管理する方法を示しています。

import React, { useReducer } from 'react';

// リデューサ関数を定義する
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  // useReducerを使用して、初期状態を0とする状態変数countと、その状態を更新する関数dispatchを定義する
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

この例では、useReducer関数を使用して、初期状態を0とする状態変数countと、その状態を更新する関数dispatchを定義しています。dispatch関数を使用することで、状態を更新することができます。

React hooksを基礎から理解する (useCallback編)

React hookのuseCallbackは、Reactコンポーネント内で関数をメモ化するために使用されます。関数をメモ化するとは、同じ入力を与えたときに、前回と同じ結果を返すようにすることを指します。これにより、無駄な再レンダリングを防ぐことができます。

useCallbackは、第1引数にメモ化する関数を、第2引数に依存する状態を指定することで、関数をメモ化することができます。依存する状態が変化したときにのみ、関数が再生成されます。

次の例は、useCallbackを使用して、Reactコンポーネント内で関数をメモ化する方法を示しています。

import React, { useState, useCallback } from 'react';

function Parent() {
  const [count, setCount] = useState(0);
  // countが変化したときにのみ、increment関数が再生成される
  const increment = useCallback(() => setCount(c => c + 1), [count]);

  return <Child increment={increment} />;
}

function Child({ increment }) {
  // 子コンポーネント内でもincrement関数を使用できる
  return <button onClick={increment}>Click me</button>;
}

この例では、useCallback関数を使用して、count状態が変化したときにのみ、increment関数が再生成されるようにしています。

React hooksを基礎から理解する (useMemo編)

React hookのuseMemoは関数コンポーネント内で使用されると、指定した関数の結果を記憶しておくことができます。これにより、関数の計算結果を保存しておくことで、同じ計算を繰り返す必要がなくなるため、パフォーマンスを向上させることができます。

使い方は以下のようになります。

import { useMemo } from 'react';

function MyComponent(props) {
  // 関数を定義
  const expensiveCalculation = () => {
    // 費用のかかる計算を行う
  };

  // useMemoを使用して、expensiveCalculationの結果を記憶する
  const memoizedValue = useMemo(expensiveCalculation, [dependency1, dependency2]);

  // memoizedValueを使用する
  return <div>{memoizedValue}</div>;
}

useMemoの第一引数には、記憶したい関数を指定します。第二引数には、この関数の結果が変化する可能性がある値（依存値）を配列で指定します。依存値が変化した場合は、関数が再計算されますが、依存値が変化しなかった場合は、前回の計算結果が使用されます。

useMemoは、関数の計算結果を保存することで、パフォーマンスを向上させることができるため、特に計算に時間がかかるような関数を使用する場合に有効です。また、useMemoは、コンポーネントのレンダリング時に評価されるため、データを保存するだけでなく、コンポーネントの描画を最適化することができます。

React hooksを基礎から理解する (useRef編)

useRefはReact hookの一つで、関数コンポーネント内で使用されると、コンポーネントに対する参照を取得することができます。これにより、関数コンポーネント内で、DOM要素や任意のJavaScriptオブジェクトに対する参照を保持することができます。

使い方は以下のようになります。

import { useRef } from 'react';

function MyComponent(props) {
  // useRefを使用して、DOM要素への参照を取得する
  const inputElement = useRef(null);

  // inputElementを使用する
  return <input ref={inputElement} />;
}

また、useRefは、任意のJavaScriptオブジェクトへの参照を取得することもできます。

import { useRef } from 'react';

function MyComponent(props) {
  // useRefを使用して、任意のJavaScriptオブジェクトへの参照を取得する
  const objectRef = useRef({});

  // objectRefを使用する
  objectRef.current.foo = 'bar';
  console.log(objectRef.current.foo); // 'bar'

  return <div />;
}

useRefは、関数コンポーネント内で、DOM要素や任意のJavaScriptオブジェクトへの参照を保持する場合によく使用されます。また、useRefは、関数コンポーネント内で値を保持することもできるため、関数コンポーネント内で変数を使用するよりも、性能が良いとされています。

useRefとuseStateの違い

useRefとuseStateは、React hookの2つで、関数コンポーネント内で使用されると、値を保持することができますが、その使い方や用途には違いがあります。

useRef

• 値を保持するためのReact hookです。
• 関数コンポーネントのレンダリング時に1度だけ初期化されます。
• DOM要素や任意のJavaScriptオブジェクトへの参照を保持することができます。
• 値を変更するためには、currentプロパティを使用します。

useState

• 値を保持するためのReact hookです。
• 関数コンポーネントのレンダリング時に毎回初期化されます。
• ステートを管理するために使用されます。
• ステートを変更するためには、setState関数を使用します。

つまり、useRefは、関数コンポーネント内で値を保持するためのものであり、ステートの管理には使用されません。一方、useStateは、関数コンポーネント内でステートを管理するためのものであり、参照を保持するためには使用されません。

また、useRefは、関数コンポーネントのレンダリング時に1度だけ初期化されるのに対し、useStateは、関数コンポーネントのレンダリング時に毎回初期化されます。このため、ステートを管理する場合は、useStateを使用することが一般的です。

まとめ

React hookは、React 16.8から導入された機能で、関数コンポーネント内で状態やライフサイクルのような、クラスコンポーネントでしか使用できなかった機能を使用することができるようになりました。

React hookは、以下のような特徴を持っています。

• 関数コンポーネント内でも、状態やライフサイクルのような、クラスコンポーネントでしか使用できなかった機能を使用することができる。
• 関数コンポーネント内で、複数のhookを組み合わせて使用することができる。
• hookを使用することで、関数コンポーネントをより可読性が高く、保守しやすいものにすることができる。

React hookには、以下のような種類があります。

• useState: ステートを管理するためのhookです。
• useEffect: コンポーネントのライフサイクルを扱うためのhookです。
• useContext: Contextを扱うためのhookです。
• useRef: 値を保持するためのhookです。
• useMemo: 関数の結果を記憶するためのhookです。

React hookを使用することで、関数コンポーネント内でも、状態やライフサイクルを扱うことができるようになります。また、hookを組み合わせて使用することで、より複雑なロジックを実装することができます。