<ul data-eligibleForWebStory="true"><li>Import on Interaction is a performance pattern that allows deferred loading of resources over the network based on user interaction.</li><li>It involves using React.lazy, Suspense, Dynamic Import, and facade pattern to load resources only when needed instead of loading them immediately on page load.</li><li>Examples include loading 3rd party widgets, authentication SDKs, infrequently used features like scroll-to-top animations or export libraries, analytics, and tabbed interfaces on user interaction or click events.</li><li>Facades can be used for deferring loading of elements like Youtube video embeds and Google login SDK until the user interacts with them to enhance performance.</li></ul>

Import on Interaction

Discover more