[React]Hooks

はじめに

Hooksを勉強していきたいと思います。

ちなみに、コードはReactの公式サイト(?)から引用しています。

reactjs.org

Hooks

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

使ってみた感想としては、すごく使いやすいなと思いました。
[count]がstateで、[setCount]がcountを扱う関数の認識です。
setCountについては、classコンポーネントのsetStateと同じ感覚ですね。

まとめ

Hooksを使えば、コンポーネント分けがすごく楽になりますし、CSS in JSも書きやすいなと思います。