--- title: The Import On Interaction Pattern | daily.dev description: Lazily importing feature code on interaction is a pattern used in many contexts. This can be achieved in many ways (defer until interaction, until the browser... canonical: https://daily.dev/posts/the-import-on-interaction-pattern-8serhydn twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The Import On Interaction Pattern | daily.dev og:description: Lazily importing feature code on interaction is a pattern used in many contexts. This can be achieved in many ways (defer until interaction, until the browser... og:url: https://daily.dev/posts/the-import-on-interaction-pattern-8serhydn og:image: https://api.daily.dev/og/posts/8SERHyDn-.png og:image:alt: The Import On Interaction Pattern og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The Import On Interaction Pattern **[Addy Osmani](https://daily.dev/sources/addy)** · [@addyosmani](https://daily.dev/addyosmani) · 12 min read · 14 upvotes · 4 comments ## Summary Lazily importing feature code on interaction is a pattern used in many contexts. This can be achieved in many ways (defer until interaction, until the browser is idle or using other heuristics) The different ways to load resources are, at a high-level: Eager - load resource right away (the normal way of loading scripts) Preload - load prior to needed, but after critical resources are loaded. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@addyosmani** · 4 upvotes > Hey daily.dev 👋 I've been working on this write-up for a while about a pattern I think can be effective for third-party embeds and widgets (and in some cases can help with optimizing the load of first-party components). I hope there are some ideas in here you find useful :) **@ghost** · 2 upvotes > Wow, so detailed and filled with awesome exampled. Great write-up!! **@idoshamun** · 1 upvotes > Hey Addy 🙌 > Thanks for writing this article. > Not so long ago I read Facebook's post that includes lots of performance tricks as well (https://engineering.fb.com/2020/05/08/web/facebook-redesign/). > They created custom import methods for different purposes, similar to what you showed in the button callback example. > > > Do you know any libraries (even React specific) for performance optimizations? > Something like Reacy lazy as you showed but for more complex use-cases. **@kramer** · 0 upvotes > We’ve just finished making some serious performance improvements to our homepage. Like you indicated, taking down the YouTube embedded video from the initial page loading was one of the most important moves in terms of performance. We will release it to prod soon. ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#general-programming](https://daily.dev/tags/general-programming) [View this post on daily.dev](https://daily.dev/posts/the-import-on-interaction-pattern-8serhydn) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The Import On Interaction Pattern","url":"https://daily.dev/posts/the-import-on-interaction-pattern-8serhydn","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-import-on-interaction-pattern-8serhydn"},"datePublished":"2020-12-09T08:12:08.427Z","dateModified":"2021-10-07T14:17:10.317Z","description":"Lazily importing feature code on interaction is a pattern used in many contexts. This can be achieved in many ways (defer until interaction, until the browser...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4ead7676490ed20478140449152b686d","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4ead7676490ed20478140449152b686d","isAccessibleForFree":true,"articleSection":"Addy Osmani","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Addy Osmani","url":"https://daily.dev/addyosmani","image":"https://avatars2.githubusercontent.com/u/110953?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":5320}},"commentCount":4,"discussionUrl":"https://daily.dev/posts/the-import-on-interaction-pattern-8serhydn","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":14},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"general-programming","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Addy Osmani","item":"https://daily.dev/sources/addy"},{"@type":"ListItem","position":3,"name":"The Import On Interaction Pattern"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-import-on-interaction-pattern-8serhydn","comment":[{"@type":"Comment","text":"Hey daily.dev 👋 I’ve been working on this write-up for a while about a pattern I think can be effective for third-party embeds and widgets (and in some cases can help with optimizing the load of first-party components). I hope there are some ideas in here you find useful :)","datePublished":"2020-12-09T08:42:18.062Z","url":"https://daily.dev/posts/8SERHyDn-#c-1AdXEj2Po","author":{"@type":"Person","name":"Addy Osmani","url":"https://daily.dev/addyosmani","image":"https://avatars2.githubusercontent.com/u/110953?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Wow, so detailed and filled with awesome exampled. Great write-up!!","datePublished":"2020-12-09T13:23:06.902Z","url":"https://daily.dev/posts/8SERHyDn-#c-5zDdptsJs","author":{"@type":"Person","name":"Deleted user","url":"https://daily.dev/ghost","image":"https://media.daily.dev/image/upload/s--hNIUzLiO--/f_auto/v1705327420/public/ghost_vlftth"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Hey Addy 🙌\nThanks for writing this article.\nNot so long ago I read Facebook’s post that includes lots of performance tricks as well (https://engineering.fb.com/2020/05/08/web/facebook-redesign/).\nThey created custom import methods for different purposes, similar to what you showed in the button callback example.\nDo you know any libraries (even React specific) for performance optimizations?\nSomething like Reacy lazy as you showed but for more complex use-cases.","datePublished":"2020-12-09T10:50:16.771Z","url":"https://daily.dev/posts/8SERHyDn-#c-gFqZtRA5x","author":{"@type":"Person","name":"Ido Shamun","url":"https://daily.dev/idoshamun","image":"https://media.daily.dev/image/upload/s---xy_OAwk--/f_auto,q_auto/v1703781380/avatars/avatar_28849d86070e4c099c877ab6837c61f0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"We’ve just finished making some serious performance improvements to our homepage. Like you indicated, taking down the YouTube embedded video from the initial page loading was one of the most important moves in terms of performance. We will release it to prod soon.","datePublished":"2020-12-09T10:46:50.692Z","url":"https://daily.dev/posts/8SERHyDn-#c-6TsHP9gWs","author":{"@type":"Person","name":"Nimrod Kramer","url":"https://daily.dev/kramer","image":"https://media.daily.dev/image/upload/v1682322243/avatars/avatar_1d339aa5b85c4e0ba85fdedb523c48d4.jpg"}}]} ```