React Hooks で作る GUI

当カレンダーの対象読者は Hooks API を少しでも触ったことがあり、[公式ドキュメント](https://reactjs.org/docs/hooks-intro.html)を確認された方です。Hooks API で、従来の Stateful Component 相当のものが書きやすくなりました。まずは Hooks を利用するモチベーションを、[Dan の記事](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889)で再確認してみましょう。

- **Huge components** that are hard to refactor and test.
- **Duplicated logic** between different components and lifecycle methods.
- **Complex patterns** like render props and higher-order components.

HOC や render props は complex pattern として、ネガティブに捉えられている様です。HOCを利用したライブラリコードは適宜対応していくとして、これから書く Stateful Component には積極的に Hooks を使って complex を解消していきたいところです。

今まで Stateful Component には、そこに隠蔽して然るべき状態を保持していました。form / animation / ref が代表的なもので、Hooks が stable になった暁にはこれらの代替として利用に差し支え無いでしょう。


# 🎄 Hooks 大喜利

「Hooks Stateful GUI」をお題に、23日分のサンプルコードを [GitHub で公開しました](https://github.com/takefumi-yoshii/react-hooks-ogiri)。アドベントカレンダーでは毎日サンプルの実装ポイントを紹介する予定です。

|ripple-button|toggle-switch|photo-carousel|drawer-menu|
|:-:|:-:|:-:|:-:|
|![1203.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/375a4aaf-c95c-0fd1-5348-e444eaa1a374.jpeg)|![1204.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/7d783e55-f89e-ff94-9f9a-012bbeb3d41a.jpeg)|![1205.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/384b0f5c-2115-6f28-3b6a-6e31135a2abb.jpeg)|![1206.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/90680c70-c3f7-2a19-1d0d-3eab23ab31cf.jpeg)|
|**pallalax-section**|**pallalax-hero**|**stickey-effects**|**stickey-image-loader**|
|![1207.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/182ca0d9-1e7c-fe1e-11b5-3ce9d1adca2e.jpeg)|![1208.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/de2a5314-e99d-585d-874d-920bb8dfef94.jpeg)|![1209.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/ead1f21a-ca6f-73cf-a1b9-a95fe12269dc.jpeg)|![1210.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/2cbca444-b4bf-fc77-3795-48cf36a3b626.jpeg)|
|**swipe-item-opener**|**swipe-pager**|**swipe-flipper**|**pull-fetcher**|
|![1211.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/daf1286c-5c42-2067-baa3-a1a6599db86a.jpeg)|![1212.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/a4b05357-d236-a545-de67-580650ce1392.jpeg)|![1213.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/03347af3-2602-d19d-d65f-4969d21ddd21.jpeg)|![1214.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/e5268ca2-5e34-de06-118c-704549a39d86.jpeg)|
|**pie-chart**|**radar-chart**|**line-chart**|**bar-chart**|
|![1215.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/caf146d3-3fbf-58d3-d73c-b99c3ed17bd3.jpeg)|![1216.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/f0ff7041-99b9-db49-60b0-eac3367608b3.jpeg)|![1217.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/3cf9586c-04de-5070-77ce-5745b35ccd43.jpeg)|![1218.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/4cdc17e2-8be8-4a2a-26f3-52bd9f075028.jpeg)|
|**google-map**|**canvas-painter**|**camera-capture**|**chat-board**|
|![1219.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/71a10ebf-7681-49ca-1c35-e949c58c9745.jpeg)|![1219.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/154394f0-2bbb-39c5-60a7-8104f4c9af98.jpeg)|![1221.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/ad7a0e95-e53c-aefb-fca0-c03074c9794d.jpeg)|![1222.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/8dc99b37-74f4-cc76-bb97-cff4872c14b7.jpeg)|
|**modal-queue**|**drag-drop-section**|**photo-album**|
|![1223.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/048ff04a-5e94-9f18-f7b5-3f3a47485833.jpeg)|![1224.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/83d7f050-1a54-b6e4-fada-f928000aefed.jpeg)|![1225.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/6d4be115-f35d-c070-9395-ed33796e6805.jpeg)|


# 免責事項

既存の Stateful Component コードを hooks に書き換えることは非推奨とされています。サンプルは、これから新しく書くものとして想定しています。

また、現状で試せるバージョンでのサンプルとなりますので、破壊的変更が入ることが考えられます。あくまでRFC現状での挙動を確認するに留めてください。正しい利用方法か否かは、各位公式の情報を常に照らし合わせてください。

# 謝辞

サンプル作成にあたり、以下サービスを活用させて頂きました。この場を持ってお礼申し上げます。

https://pixabay.com/

https://www.flaticon.com