React Hooksとは

hookとは

React公式には以下のように記載されています。

フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。

そもそもstateって何のことでしょうか、まずはそこから整理していきます。

stateとは

React ではユーザの動きに合わせて変わる値のことをstateという。
以下の例のように、constructor内でオブジェクトとしてstateを定義します。
定義されたものは、this.state.プロパティ名で設定した値を取得することが可能です。
また、this.setState({プロパティ:設定する値})で、プロパティの値を変更できます。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0 // countプロパティを定義(初期値は0)
    };
  }
  handleClick(){
    // countの値を変更
    this.setState({count:this.state.count+1});
  }
  render() {
    return (
      <div>
        <h1>
          {this.state.count}
        </h1>
        <button onClick={()=>{this.handleClick()}} >+</button>

      </div>
    );
  }
}

useState

hook はstate などの機能を関数コンポーネント内に使用できるようにするための関数です。
先ほどのサンプルではクラス内でstateを使っていましたが、例えば以下のように記述できるということです。

import React, { useState } from 'react';

function Example() {
  // countを定義(初期値は0)
  const [count, setCount] = useState(0);

  handleClick(){
    // countの値を変更
    setCount(count + 1);
  }
  return (
    <div>
      <h1>
        {count}
      </h1>
      <button onClick={()=>{this.handleClick()}} >+</button>
    </div>
  );
}

useState というhookを使ってcountの値を管理し、値を更新する場合はsetCountを使用します。
hookを使った方が、よりスッキリとしたコードになりました。
これがhookというものです。

useEffect

useEffectは毎回レンダリング後に、その処理が実行されます。
componentDidMountやcomponentDidUpdateと同じようなものです。

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

function Example() {
  // countを定義(初期値は0)
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  handleClick(){
    // countの値を変更
    setCount(count + 1);
  }
  return (
    <div>
      <h1>
        {count}
      </h1>
      <button onClick={()=>{this.handleClick()}} >+</button>
    </div>
  );
}```