React Hooks を導入しようとしたはなし

React Hooks について

最近プロジェクトでReactをメインで触るようになり、すこーしReact読めるようになったかなと思ってきたので、（ヒヨコである事に変わりありませんが…。）今後末長くReactとお付き合いできるように歴史について勉強しようという事で、今更ながらReact ver16.8で導入された React Hooks についてちゃんと勉強してみました。

過去作ったToDoApp

React 触り始めて勉強用に作った ToDoApp(GitHub)はthis.stateで書いていたので、React Hooks でのメリデリ掴むために React Hooks 導入してみようかなと思います！

this.state から useState に...

useState について

useStateはインポートする事で使い始めることができます。

import React, { useState } from 'react';

state値と、stateの更新関数を同時に宣言します。代入元のuseStateに初期値を持たせることができます。

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

// setCount 関数で新しい値をセットしてあげます。
return (
    <div>
      <button onClick={() => setCount(count + 1)} > + </button>
      <span>{count}</span>
    </div>
);

これで、ボタンが押されるたびに画面に表示された数字がインクリメントされます。

導入検討ファイル

メインのファイルである、src/components/TaskInput.jsからまず導入を検討しました。
上記のサンプル作るためにリファレンス読んでて気づいたのですが、useStateは、関数型コンポーネントでの利用を目的として開発されているようで、クラス型で組んだコンポーネントを今回のuseStateに書き換えるのはナンセンスのようです。

今回のToDoAppは、以下のようにクラスコンポーネントで記述しているため、いろいろ大変そうです。

class TaskInput extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      todo: [],
      values: '',
    };
   ....

useState は、関数単位でReactで保持可能なstateを生成できるという特徴があります。

クラスを書かずに使えるようになります。 　（ステートフックの利用法）

atom単位から機能単位で管理されるもので利用する事で効果（メリット）を発揮できそうです。

React Hooks　導入に至って

今回、ToDoApp への導入はちょいと見送ります。。笑
機能拡張などの際には使える機能な気がします。
src/compornents/atoms/内で管理されているファイルなどでstate管理が追加される場合には積極的に使っていきたい機能です。

思いついた用法としては、reduxFormと合わせて、簡単にバリデーションフォームコンポーネントを作ることもできそうだなと感じています。
次回挑戦したいと思います！

さいごに

今回は、React ver16.8で導入された React Hooks について書きました。
よりシンプルでミニマムで管理されたコンポーネント開発を行うために便利な機能が追加された気がします。
個人的には運用の段階ではthis.stateとuseStateを使い分けながら開発したいなと思います。
（クラス型で開発されたものは、改修が大きくなっちゃう）

クラス型技法が好きな僕としては、利用機会が少なそうですが、小さいプロジェクトなどで使ってみたいなと思います。

これからのアップデートも常に気にかけながら導入検討を進めて行かなければいけないですね。大変です。。