Import on Interaction

WHAT

It is a performance pattern, that allows us on import things over network, on some interaction.
This can be done using React.lazy , Suspense, Dynamic Import & facade pattern.

Instead of Eager Loading (Loading resources immediately, on page load) , we load them on interaction.

Facade pattern : It is a design pattern that provides a simplified interface to a more complex subsystem. Means we mimic the UI of the deferred resource using HTML/CSS/JS.

Examples :

• Showing 3rd Party Widgets : We load the 3rd party widget on interaction, initially we show a facade.
  • Video Embeds
  • Chat Widgets
  • Social Media Widgets
• Non-critical resources
  • EmojiPicker: that didn't used that much.
  • Filters

• Authentication SDK's : Our app supports 3rd party authentication, so loading that on initial render will be a bad idea. Instead import it on interaction - Basically on button click or show a facade to the user.

• Infrequently used features

  • Scroll to Top : Load animation libraries (e.g., react-scroll) only when the user clicks a "Back to Top" button.

  const ScrollToTop = ()=>{ const [scrollLibrary,setScrollLibrary] = useState(null); const handleScroll = ()=>{ import('react-scroll').then((module)=>{ setScrollLibrary(module); module.animateScroll.scrollToTop(); }) } return <> <button onClick={handleScroll}>Back to Top</button>  </> } 

  • Export : Defer loading libraries for generating PDFs or CSVs (e.g., jsPDF) until the user clicks an export button.
  • Analytics : Don't preload/prefecth this as that many users don't use it.
  • Tabbed Interface : Load the tab component only when the user clicks a tab.

   const Tab1 = React.lazy(()=>import('./Tab1)); const Tab2 = React.lazy(()=>import('./Tab2)); const tabbedInterface = ()=>{ const [activeTab,setActiveTab] = useState(0); return <> <button onClick={()=>setActiveTab(0)}>Tab 1</button>  <button onClick={()=>setActiveTab(1)}>Tab 2</button>  <Suspense fallback={<div>Loading...</div>}> // In Server side use Loadable Component {activeTab === 0 && <Tab1 />} {activeTab === 1 && <Tab2 />} </Suspense>  </>; } 

HOW

Facade for a Youtube Video Embed

const YoutubeFacade = ()=>{ const [isEmbedLoaded,setIsEmbedLoaded] = useState(false); return <div classname='youtube-embed'> { !isEmbedLoaded ? <> <img src={`https://img.youtube.com/vi/${videoId}/hqdefault.jpg`} alt="Video thumbnail" style={{ width: '100%', height: '100%' }} />  <button style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', padding: '10px 20px', background: 'red', color: 'white', border: 'none', }} > Play </button>  </div>  </>:<>  <iframe width="560" height="315" src={`https://www.youtube.com/embed/${videoId}?autoplay=1`} frameBorder="0" allow="autoplay; encrypted-media" allowFullScreen /> </>  } </div> } 

Only after the user clicks the facade does the element get added to the DOM with the.

Don't use this when

• you need to do autoplay
• you need that for SEO

Facade for a Login with Google

const GoogleLoginFacade = ()=>{ const [isSdkLoaded,setIsSdkLoaded] = useState(false); const loadGoogleSDK = ()=>{ import("./google-auth").then((module)=>{ // a new bundle is fetched with some autogenerated name, if you want a more friendly then you define its name by doing this - import(/*webpackChunkName:"google-sdk"*/ './google-auth') module.initGoogleSignIn(); setIsSdkLoaded(true); }) } return <> { !isSdkLoaded ? <> <div className='google-login-button'> <button onClick={loadGoogleSDK}>Login with Google</button>  </div>  </>:<>  <div id="google-signin-button" /> </>  } </> } // This get loaded on demand // google-auth.js export const initGoogleSignIn = () => { const script = document.createElement('script'); script.src = 'https://apis.google.com/js/client:platform.js?onload=showLoginScreen'; script.async = true; document.body.appendChild(script); };