Why React.lazy() Inside a Component Causes Infinite Flickering (And the Fix)

I spent longer than I'd like to admit staring at a contract landing page that flickered infinitely. Every state change — typing a character, clicking a button — caused the whole page to flash. Suspense fallback in, Suspense fallback out. Over and over. The root cause was one line of code in the wrong place. What Was Happening The landing page component used React.lazy() to dynamically import a heavy contract upload widget. The code looked roughly like this: function ContractLandingPage ({ contractType }: Props ) { // ❌ THIS IS THE BUG const ContractUploader = React . lazy (() => import ( " ../components/ContractUploader " ) ); return ( < React . Suspense fallback = { < Spinner /> } > < ContractUploader contractType = { contractType } /> </ React . Suspense > ); } Looks reasonable, right? Lazy-load the heavy component, wrap it in Suspense, done. Except it breaks completely. Why It Breaks React.lazy() creates a new lazy component reference on every call. When you put it inside a componen