--- title: Lazy Loading in images with React JS 😴 | daily.dev description: Lazy Loading in images with React JS is very important nowadays to improve the performance of your website. Performing image optimization helps your website to... canonical: https://daily.dev/posts/lazy-loading-in-images-with-react-js--b6resjult twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Lazy Loading in images with React JS 😴 | daily.dev og:description: Lazy Loading in images with React JS is very important nowadays to improve the performance of your website. Performing image optimization helps your website to... og:url: https://daily.dev/posts/lazy-loading-in-images-with-react-js--b6resjult og:image: https://api.daily.dev/og/posts/b6reSjuLt.png og:image:alt: Lazy Loading in images with React JS 😴 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. # Lazy Loading in images with React JS 😴 **[Community Picks](https://daily.dev/sources/community)** · 5 min read · 145 upvotes · 13 comments ## Summary Lazy Loading in images with React JS is very important nowadays to improve the performance of your website. Performing image optimization helps your website to be faster, have better SEO and improve user experience. This time you will learn how to lazy load images in an application with React [...Array.from(Array(items).keys) The solution is to implement lazy loading. With this, the 15 images would appear downwards. ## 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. **@ghost** · 2 upvotes > Great one! **@iaros** · 1 upvotes > Awesome, thank you! **@emma925** · 1 upvotes > Great one one thanks for the article **@israeltduarte** · 1 upvotes > nice one! **@ebuz** · 1 upvotes > This is awesome. --- Tags: [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/lazy-loading-in-images-with-react-js--b6resjult) ```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":"Lazy Loading in images with React JS 😴","url":"https://daily.dev/posts/lazy-loading-in-images-with-react-js--b6resjult","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/lazy-loading-in-images-with-react-js--b6resjult"},"datePublished":"2022-10-22T10:30:40.647Z","dateModified":"2023-12-07T12:02:45.284Z","description":"Lazy Loading in images with React JS is very important nowadays to improve the performance of your website. Performing image optimization helps your website to...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/cd09276a82ad7d48f4e22330c86970d8","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/cd09276a82ad7d48f4e22330c86970d8","isAccessibleForFree":true,"articleSection":"Community Picks","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":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":13,"discussionUrl":"https://daily.dev/posts/lazy-loading-in-images-with-react-js--b6resjult","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":145},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":13}],"keywords":"react","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"Lazy Loading in images with React JS 😴"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/lazy-loading-in-images-with-react-js--b6resjult","comment":[{"@type":"Comment","text":"Great one!","datePublished":"2022-10-22T10:37:34.066Z","url":"https://daily.dev/posts/b6reSjuLt#c-PPGUz-QwM","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":"Awesome, thank you!","datePublished":"2022-10-23T13:43:40.699Z","url":"https://daily.dev/posts/b6reSjuLt#c-AhzKdoo54","author":{"@type":"Person","name":"Iaroslav","url":"https://daily.dev/iaros","image":"https://lh3.googleusercontent.com/a-/AAuE7mBael5pTvP9IS0CBBf2sjYhBO_xQ3RW6YpVrPNR6w=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Great one one thanks for the article","datePublished":"2022-10-22T13:37:06.859Z","url":"https://daily.dev/posts/b6reSjuLt#c-dqB4IGqPx","author":{"@type":"Person","name":"Emmanuel Soetan","url":"https://daily.dev/emma925","image":"https://media.daily.dev/image/upload/s--zd_ZsKtl--/f_auto/v1714555872/avatars/avatar_ptLBZhzdx"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"nice one!","datePublished":"2022-10-27T03:20:41.146Z","url":"https://daily.dev/posts/b6reSjuLt#c-KwpuW45tw","author":{"@type":"Person","name":"Israel Duarte","url":"https://daily.dev/israeltduarte","image":"https://lh3.googleusercontent.com/a/ALm5wu01T-QTVOjEMI-ZsmPgof2ZDwCyCJ6vLrVMVtl0DQ=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"This is awesome.","datePublished":"2022-10-23T14:37:35.144Z","dateModified":"2022-11-06T08:30:02.078Z","url":"https://daily.dev/posts/b6reSjuLt#c-ihzFVjq5A","author":{"@type":"Person","name":"Taki Elias","url":"https://daily.dev/ebuz","image":"https://media.daily.dev/image/upload/v1667280113/avatars/avatar_WPc7MkTKlK9IHPGFzkjfv.jpg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```