Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。 私は当時から今までずっとこのパターンを推奨しているのですが、あまり流行る気配がありません。そこで、この記事では皆さんがこのパターンの考え方にもう少し納得できるように、render hooksパターンは普通のコンポーネントの拡張であるという見方をご紹介します。 Render hooksパターンの概要 Render hooksパターンは、UIの実装(JSX)と、そのUIに関連するロジック(たとえばステート)をまとめてカスタムフックから提供することを指します。簡単な例を
![Render hooksをコンポーネントの拡張として理解する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d4c643a4028b59a207900a574674c8b62630297/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fengineer-festa-ogp-background-074608b13b4bbe67c10ada41e7e2d292.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UmVuZGVyJTIwaG9va3MlRTMlODIlOTIlRTMlODIlQjMlRTMlODMlQjMlRTMlODMlOUQlRTMlODMlQkMlRTMlODMlOEQlRTMlODMlQjMlRTMlODMlODglRTMlODElQUUlRTYlOEIlQTElRTUlQkMlQjUlRTMlODElQTglRTMlODElOTclRTMlODElQTYlRTclOTAlODYlRTglQTclQTMlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyM0ZGRkZGRiZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPThiZTIzZjQ5Y2IyODYzYWNkZDhjYzQzOTMyNzU2YmNk%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDB1aHlvJnR4dC1jb2xvcj0lMjNGRkZGRkYmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lMjcyYzFlYjA0MDVlNWU1Yzc3YTg5YWIwZTY3NjM0Nw%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3Dd1c159d250a6533fbc81e3f141479dd1)