React

React hooksを中心にReactの変化をまとめてみた

どうも、sakitoです。

今回は現在React界隈で起こっていることについて、プロダクトチームに共有したまとめをせっかくならパブリックにしようと思い投稿。

最近のReact界隈でなにが起こっているのか

React hooksとは?

  • 要はclass App extends React.Componentとするようなclassコンポーネントを使わずに、関数コンポーネントでstate操作やライフサイクル的なことをする
  • reduxのconnect的なこともできる
  • これからはstateless componentsはなく、function componentsという呼び方になる

こんな感じにclassコンポーネントが変わる。
左が現在のclassコンポーネントで、右がhooksを使用した関数コンポーネント
https://twitter.com/andychilton/status/1057089468769828864
Dqs9tU_UcAEHUFc.jpg

なにがよいのか?

今まではライフサイクルやstateに副作用のない場合のみstateless componentsにしていた。
その後開発を進めるにつれて、stateless componentsで作ったものに副作用が必要になった場合、classコンポーネントにリファクタリングする手間があった。
hooksによりfunction componentsにできることで、開発途中に上記のようなリファクタリングの手間がなくなる。
さらに詳しい情報はReact - Motivationを読むとよい。

今すぐ使った方がよいのか?

まだhooksの仕様は固まっておらず、今後仕様が変わる可能性があるので、今すぐ使う必要はなさそう。
現在はこのIssueでhooksについてのフィードバックを集めている。

今後の開発について

hoooks - Gradual Adoption Strategyを読む限り、classコンポーネントは今後削除される予定もなく、Facebook自体もまだまだclassコンポーネントを使用しているそう。
今後はhooksでclassコンポーネントをサポートする動きもある。
なので、無理にclassコンポーネントを無くしていく方向にしなくても良さそう。

hooksへ段階的に移行できるように、下記を行っておくと良さそうだと個人的に思う。

  • classコンポーネントはライフサイクルやstateのみに集中し、他のメソッドは書かない
  • ライフサイクルやstateを共通化したコンポーネントを作りたい場合は、render propコンポーネントにする

もっと詳しく知りたい人への参考資料