React Hookを簡単に理解する

Hookとは

Hookの定義は、公式文書よりReactの機能に「接続(hook into)」するための特別な関数となっていて、
具体的なHookには、useState、useEffect、useContextなどがある。これらの総称としてHookが使われている。

何ができるようになったのか

Hookによって何ができるようになったのかは、単的にいうと「Reactの機能がclassを書かなくても使えるようになる」である。
具体的には、今まで下記のように宣言して変更していたものが

// 宣言
this.state = {
  count: 0
};

// 変更
this.setState({ count: this.state.count + 1 })

Hookを使うと簡単に宣言できる

// 宣言
const [count, setCount] = useState(0);

// 変更
setCount(count + 1)

これの何がすごいのか

thisが何かを気にしなくても良くなる。
今まではthisが何かを意識しなければいけなかった。

複雑なコンポーネントは理解しやすくなる
ロジックの副作用による複雑さの解消