Reactのフック（Hook）API😊

こんにちは！　株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「Reactのフック（Hook）API」についてお伝えしていきます。

React Hooks API

React Hooks APIは、Reactの関数型コンポーネントで、状態やライフサイクルメソッドを利用できるようにするAPIです。Hooksを使うことで、コンポーネントの状態をより簡潔に、効率的に、そして再利用可能に管理することができます。

useStateとは

useStateはコンポーネントに状態変数を追加できる React フックです。

以下のコードは、ボタンをクリックすると数値が増えるカウンターを作成するコンポーネントです。

数値はReactのstate機能を使って管理されています。

useState( )という関数がHooksです。

countには、初期値が入ります。setCountには、更新する値が入ります。

更新するための関数は「set〇〇」という形式にします。

import React, { useState } from "react";

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

  const handleClick = () => {
// prevcountには前回の値が入る
    setCount((prevcount) => prevcount + 1);
  };
  return (
    <div>
      {count}
      <button onClick={handleClick}>追加</button>
    </div>
  );
};

export default Count;

useEffectとは

useEffectに渡された関数はレンダーの結果が画面に反映された後に動作します。

マウント時、アンマウント時に実装したいことを記述します。

以下のコードは、サイトが表示されたときに「マウント時」の処理が実行され、別のサイトに遷移すると「アンマウント時」の処理が実行されます。

アンマウント時の処理を、「クリーンアップ関数」といいます。

import React, { useEffect } from "react";

const Component = () => {
  useEffect(() => {
    alert("マウント時");

    return () => {
      alert("アンマウント時");
    };
  }, []);
  return (
    <div>
    </div>
  );
};

export default Component;

useCallbackとは

useCallbackとはメモ化されたコールバックを返します。

メモ化とは同じ結果を返す処理について、初回のみ処理を実行記録しておき、値が必要となった2回目以降は、前回の処理結果を計算することなく呼び出し値を得られるようにすることです。

useCallback でメモ化した関数を渡すことでパフォーマンスが向上します。

メモ化は、コールバック関数だけでなくコンポーネントにも適用可能です。

コンポーネント全体をmemo()関数で囲ってあげると、そのコンポーネントをメモ化できます。

以下のコードは、ChildComponent.jsをmemo()で囲っています。

コードを実行すると、それぞれのボタンを押すと、対応したコンポーネントのconsole.log()のみが実行されます。

import React, { memo, useState, useCallback } from "react";

// コンポーネントは、`name`と`handleClick`というpropsを受け取り、ボタン要素をレンダリングしています。
// memo()`を使って`ChildComponent`コンポーネントをラップしています。
const ChildComponent = memo(({ name, handleClick }) => {
  console.log(`子コンポーネント「${name}」が再レンダリングされました`);
  return <button onClick={handleClick}>{name}を+1</button>;
});


export const UseCallbackComponent = () => {
 
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

//`useCallback()`フックを使って`handleClick1`と`handleClick2`という関数をメモ化しています。
  const handleClick1 = useCallback(() => {
    setCount1(count1 + 1);

// 第二引数で指定した値が更新されると、この関数も実行される
  }, [count1]);

  const handleClick2 = useCallback(() => {
    setCount2(count2 + 1);

// 第二引数で指定した値が更新されると、この関数も実行される
  }, [count2]);

  return (
    <div>
      <div>
        {count1} , {count2}
      </div>
      <div className="buttonGroup">
        <ChildComponent name="カウンタ1" handleClick={handleClick1} />
        <ChildComponent name="カウンタ2" handleClick={handleClick2} />
      </div>
    </div>
  );
};

useRefとは

useRefはReactフックの一つで、DOMノードやコンポーネントのインスタンスを参照するための仕組みです。

useRefを使うことで、ref属性を使わずにDOMノードやコンポーネントのインスタンスを取得できます。

以下の例は、フォームに入力された値をリセットするボタンを作成する例です。

フォームのinputタグにref属性をつけ、useRef関数を使ってrefオブジェクトを生成しています。

それをリセットボタンを押すと呼び出す関数に渡して、フォームの値をリセットしています。

import React, { useRef } from 'react';

const ResetButton = () => {
  // フォームの参照を作成する
  const formRef = useRef(null);

  // リセット処理
  const handleReset = () => {
    formRef.current.reset();
  }

  return (
    <div>
      <form ref={formRef}>
        <input type="text" name="username" placeholder="ユーザー名" />
        <input type="password" name="password" placeholder="パスワード" />
      </form>
      <button onClick={handleReset}>リセット</button>
    </div>
  );
};