React Hooksの備忘録(useState、useEffect)

はじめに

普段C#で開発を行っていますが、最近Web開発技術も勉強中です。
React Hooksについて学ぶ機会があったのでまとめます。

React Hooksとは

React Hooksによって今までほぼViewを返すだけだった関数コンポーネントで状態(state)やライフサイクルを持てるようにしたものと理解しています。

useState

関数型コンポーネントで状態(state)を扱うためのものです。
以下のように、useStateを呼ぶことで、stateの値(下のコードではcount)とその値を更新するための関数(下のコードではsetCount)が宣言されます。これにより、関数を抜けてもstateの値が保持されるようになります。
また、useStateの引数にはstateの値の初期値を入れます。

import React, {useState} from "react";
const MyHooksComponent = () => {
  const [count, setCount] = useState(0);
};

以下のようにsetCountを呼ぶことで、ボタンクリック時にcountが更新されます。

import React, {useState} from "react";

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

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

    return <div>
        <h1>MyHooksComponent</h1>
        <div>{count}</div>
        <button onClick={handleClick}>PLUS 1!</button>
    </div>
}

export default MyHooksComponent;

useEffect

ライフサイクルメソッドを関数コンポーネントで実現するためのものです。
UseEffectはDidMountおよびDidUpdateのタイミングで呼ばれる、つまり、毎回のレンダー後に呼ばれるものです。
UseEffect内で関数をreturnする処理を書くと、その処理がCleanUp(WillUnMount)時に呼ばれます。これも毎回のレンダー後に呼ばれます。
UseEffectを使うと、DidMount, DidUpdate, WillUnMountがuseEffect内に1つにまとまるイメージでしょうか。
毎回のレンダー後でなく、特定のstateの変化があった場合のみ呼ぶ場合は、useEffectの第2引数に配列(依存配列)を渡し、配列の中に対象のstateを記載します。
また、useEffectの第2引数に空の配列を渡すと、DidMountおよびWillUnMount時のみ(毎回のレンダーで呼びたくない)処理を実行できます。

import React, { useEffect, useMemo, useState } from "react";

const MyHooksClock = () => {
    const [date, setDate] = useState(new Date());
    const [count, setCount] = useState(0);

    const tick = () => {
        console.log(new Date());
        setDate(new Date());
    };

    useEffect(() => {
        // setIntervalでは渡された関数を定期実行する関数
　　    // 第2引数に空の配列を指定すると、レンダー後、一回のみsetIntervalが呼ばれる
        // レンダーの度(1秒ごと)にsetIntervalが増殖するのを防げる
        const timerId = setInterval(()=> tick(),1000);
        return () => {
            clearInterval(timerId);
        };
    }, []);
    
    useEffect(()=>{
        // ボタンをクリックして、setCountでcountが変化したときだけ呼ばれる
        if (count === 10) {
            alert("10!!");
        }
    },[count]);

    return (
        <div>
            <h1>What time is it?</h1>
            <h2>It is {date.toLocaleTimeString()}.</h2>
            <button onClick={()=>setCount(count+1)}>count + 1</button>
            <h3>{count}</h3>
        </div>
    );
};

export default MyHooksClock

最後に

React自体学びたてなので色々怪しいですが、記事を書いて少し整理できました。
React Hooks使えるようになれそうです。