How to Delegate your React Dialogs
summary
Claim: hide modal state and markup behind a button so containers lose clutter and repeated modals. Built a DeleteButton that moves state into a useConfirmation hook which returns a Promise and resolves on confirm or rejects on cancel. Saves roughly 20 lines in the container, replaces N per-page modals with one context-backed modal provider, demo shows delete button triggering a toast so it works. Notes that this last step can be overengineering and recommends starting from third-party libs then adapting.
AI-written summary · about
chapters (6)
- 0:00React dialog delegation intro
- 1:08Refactoring dialogs
- 2:55Custom confirmation buttons
- 4:39Avoid over-engineering
- 5:43Context for dialog state
- 7:12Q&A
