モーダルの開閉状態を URL で管理する

よくあるモーダルの実装について考えてみましょう。モーダルは名前のとおり、現在開いているか閉じているかの状態（モード）があります。状態を管理するときには、React の useState フックを利用する方法がまっさきに思い浮かぶのではないでしょうか？ import { useState } from "react"; import Dialog from '@ui/components/Dialog'; import Button from '@ui/components/Button'; const App = () => { const [isOpen, setIsOpen] = useState(false); return ( <> <Button variant="outlined" onClick={() => setIsOpen(true)}> Open dialog </B

[nemoba]

そしてサブモーダルに詰む。モーダルってUIの本質的な複雑さを呼び起こすので、利用を局所化するほうが良いよ。

[rogertroutman]

モーダルを頻繁に開閉するサイトだとブラウザバックの使い勝手に影響するので、履歴に残す／残さないは適宜取捨選択したほうがいいかも（元いたページに戻るのに意味のない開閉にも全部つきあわされると不便）

[tadyjp]

モーダル（ダイアログ）は直前のコンテキストに引っ張られるから、多用したくない派。（記事の例はXみたく追加画面だからそこまでではないが）Notionの検索は単体ページにしてブックマークしたい。

[tofu-kun]

モーダルはもーダルい