【LINE証券 FrontEnd】コンポーネントをカスタムフックで提供してみた

こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。 以前の記事でご紹介した通り、LINE証券ではReactを使用しています。React 16.8で導入されたフックの機能は非常に革新的で、特にカスタムフックの概念によってReactにおけるコンポーネント設計は大きく様変わりしました。我々もフック時代のコンポーネント設計を試行錯誤しており、その結果はLINE証券にも反映されています。 この記事では、その中でも我々が最近ハマっている「カスタムフックを通じてコンポーネントを提供する」という、いわば“render hooks”とも言うべき設計パターンを紹介します。 今回のお題 今回は、「いくつかのチェックボックスがあり、全部チェックを入れると次に進める」という典型的なパターンを題材にしましょう。次の画像では3つのチェックボックスと「次へ」ボタンが並んでおり