render hook と Promise を使ってダイアログを含むフローの記述を疎結合に実現する

はじめに やめ太郎さんによる記事 の末尾で紹介されている、「render hook と Promise を組み合わせた方法」について、簡潔に解説し、そのメリットも併せて述べます。 2番煎じですが、そのネタの提供者は僕なので #@!*... (循環参照エラー) Promise を使うことのメリット Promise を使うことによって、確認ダイアログの「確認ボタン」「キャンセルボタン」を押下したときの操作が、ダイアログ側ではなく、ページ側(ダイアログ呼び出し側) に 記述できるようになります。そのおかげで、深くなりがちな関数呼び出しの階層を浅くして、コードを追いやすくなります。 ▼ こんな風に、簡潔でありながら、 階層が浅く、「モーダル操作と種々の処理」の記述が一つの階層にまとめて記述できています。 const { renderDeleteDialog, confirmDelete } = u