React フックについて勉強してみた

初めに

React のフックについて以下のドキュメントを参考に勉強してみました。

フックとは

クラスコンポーネントの state や setState を関数コンポーネントでも扱えるようにしたのがフックです。

例えば、以下のような date という state と、それを更新する setState は、const [date, setTimer] = useState(new Date()); と定義されます。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

↓ フックを使う場合

const Clock = () => {
  const [date, setTimer] = useState(new Date());

  const tick = () => {
    setTimer(new Date());
  }

このように、setTimer は date 更新用の setState です。また、useState(new Date()) の new Date() は、date の初期値です。これは、クラスコンポーネントで以下のように初期値を設定することと同等です。

this.state = {date: new Date()};

副作用フックとは

クラスコンポーネントの componentDidMount と componentDidUpdate と componentWillUnmount をまとめて useEffect で記述したものが副作用フックです。

例えば、以下の 1 秒おきに時間を更新するマウントとアンマウントは、useEffect で書くことができます。

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

↓ 副作用フックを使う場合

  useEffect(() => {
    setInterval(
      () => tick(),
      1000
    );
  })

サンプルコード

こちらにある時計のサンプルをフックを使って書き換えてみました。

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Clock = () => {
  const [date, setTimer] = useState(new Date());

  useEffect(() => {
    setInterval(
      () => tick(),
      1000
    );
  })

  const tick = () => {
    setTimer(new Date());
  }

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

まとめ

以下の 2 点について勉強しました。

• フックとは何か
• 副作用フックとは何か

参考記事