React Hooks (useState)

React HooksはReact 16.8から備わった機能。
色々便利な機能が備わっている。

useState は、SFCでも状態を持つことが出来るようになる。

今までのコンポーネント

// Hoge.jsx

import React from "react";

export default class Hoge extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
   this.clickHandler = this.clickHandler.bind(this);
 }

 clickHandler() {
   this.setState({ count: this.state.count + 1 });
 }

 render() {
   return (
     <div>
       <p>{this.state.count}</p>
       <button onClick={this.clickHandler}>click me</button>
     </div>
   );
 }
}

classしかStateを持つことが出来なかった、書き方も冗長。

useStateを使用後のコンポーネント

// Hoge.jsx

import React, { useState } from "react";

export default function Hoge() {
 const [count, setCount] = useState(0);

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

 return (
   <div>
     <p>{count}</p>
     <button onClick={clickHandler}>click me</button>
   </div>
 );
}

useStateに初期値を渡すと、状態（count）とそれを更新する専用の関数(setCount) を返す。「set+状態名」とするのが慣例らしい。

bind使ってthisを拘束したり、constructorで初期化したりしないのでとても楽になった印象。１つの状態とそれを更新する関数が対になっているのも余計なバグを産まない気がする。