FizzBuzzボタンを作りながらReact Hooksを学ぶ 第5回

FizzBuzz ボタンを作りながら React Hooks を学んでいきます。
目次はこちら。

マウント、アンマウントされたときの処理を実装する

前回までで Hooks および関数コンポーネントを使う方法で、FizzBuzz ボタンを作りました。
前回の修正ではマウント、アンマウント時の処理を削除してしまいました。今回はそこを実装していきます。

マウント時の処理には Effect Hook を使います。
useEffect の第2引数に [] を指定することで、マウント時に第1引数の関数が実行されます。
また、アンマウント時には第1引数の戻り値の関数が実行されます。

FizzBuzz.tsx（マウント、アンマウント時の処理）

  useEffect(() => {
    console.log('mount');
    return () => console.log('unmount');
  }, []);

全体ではこんな感じ。

FizzBuzz.tsx

import React, { useState, useCallback, useEffect } from 'react';
import FizzBuzzView from './FizzBuzzView';
import { fizzBuzz } from './common';

type Props = {
  // props で count の初期値を受け取る
  initialCount: number;
};

const FizzBuzz: React.FC<Props> = React.memo((props: Props) => {
  const [count, setCount] = useState(props.initialCount);
  const plus1 = useCallback(() => setCount(count => count + 1), []);
  const clear = useCallback(() => setCount(props.initialCount), [
    props.initialCount,
  ]);
  useEffect(() => {
    console.log('mount');
    return () => console.log('unmount');
  }, []);
  const message = fizzBuzz(count);

  return (
    <FizzBuzzView count={count} message={message} plus1={plus1} clear={clear} />
  );
});

export default FizzBuzz;

ここまででひととおり React Hooks を使用した FizzBuzz ボタンは完成です。
今回作成したソースコードはこちら。
次回は Custom Hook を作ります。