How I Moved a React Component Across the DOM Without Losing Its State — A Checkout Story

The article describes a real-world checkout page problem where a coupon component must appear in a sidebar on desktop but move into the main content flow on mobile/tablet, without duplicating state. The solution uses React Portals combined with JavaScript media queries to dynamically teleport a single component instance to different DOM locations based on viewport size. This preserves component state, avoids duplicate renders, and handles orientation changes on tablets seamlessly.