React createPortal Render UI Outside the Component Tree

เวลาเราสร้าง Component ใน React เรามักคาดหวังว่า DOM ที่ถูก Render จะอยู่ในตำแหน่งเดียวกับ Component นั้น

DOM ที่จะได้

แต่มี UI บางประเภทที่ไม่ควรถูก Render ตามตำแหน่งของ Component เช่น

• Modal
• Dialog
• Tooltip
• Dropdown
• Toast Notification
• Context Menu

UI เหล่านี้ควรแสดงอยู่ "เหนือ" ทุกอย่างบนหน้าจอ ไม่ใช่อยู่ภายใน Layout ของ Parent

นี่คือเหตุผลที่ createPortal ถูกสร้างขึ้นมา