React Hook を利用して状態管理を見直す。Unstated Next?

React Hook について少し勉強してみました。

これまで状態管理に MobX を利用してきたのですが、Hook を勉強した結果、これまでのやり方を見直すべきなのではないかと思いました。

Hook を利用してローカルステートで書くのは、とてもわかりやすく、処理が散らばらない点も素晴らしいと感じました。現状、MobX 上ですべてのステート、すべての処理をまとめているのですが、このやり方はやめるべきじゃないかと。

状態管理の例としてよくあるカウンターの数値を増減させるサンプルのようなものでも、自分はこれまで外部のストアにすべて書き出していました。でも Hook を学び、コンポーネント内にステートも処理も入れ込んでしまう書き方を試してみたところ、こちらの方が全然扱いやすいように思えるのです。

CSS では emotion というライブラリを利用しているのですが、こちらも HTML のタグにそのままスタイルを書き込んでいきます。最初は違和感も大きかったのですが、しばらく使ってみると、とても扱いやすいことに気づきました。

<div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >

こんな感じです。.css ファイルとしてすべて書き出すよりも、その場で済むものはその場に書いた方がいい。状態の管理についてもそういう考え方に傾きつつあります。

そこそこ作り込んでから方針変換を行うのはしんどいですが、納得できない書き方のまま進めていくのもモチベーションの維持が難しくなりそうなので、思い切って Hook をベースにした書き方に変えるべきじゃないかと。

いろいろ調べてみたところ、Unstated Next という、Hook を利用して状態を管理するライブラリーを発見したので、これからこれについて学んでみようと思います。これが良さげなら MobX は卒業か?

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)