{"id":28314,"date":"2023-05-08T06:00:00","date_gmt":"2023-05-08T13:00:00","guid":{"rendered":"http:\/\/lazy-loading-with-infinite-scroll"},"modified":"2025-10-20T15:50:49","modified_gmt":"2025-10-20T22:50:49","slug":"lazy-loading-with-infinite-scroll","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll","title":{"rendered":"How to Implement Infinite Scroll Lazy Load With React"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>One of the major challenges we face as frontend developers is to efficiently manage large sets of data. \u201cEfficiently\u201d here means managing the data in a way that doesn\u2019t affect the user experience negatively. The common way of handling this is with Pagination but the problem with pagination is that it becomes clunky and delivers a poor user experience as the data grows.<\/p>\n<p>In this guide, we\u2019ll use React lazy load CSS which is better and more friendly than using the conventional custom loading with hooks, and then we will use the user-friendly substitute for pagination, infinite scroll, to solve this challenge. Included is a lazy scrolling example that you can experiment with in Codesandbox.<\/p>\n<h2>Prerequisites<\/h2>\n<p>You need to have the following to flow with this guide:<\/p>\n<ul>\n<li>Knowledge of JavaScript and React<\/li>\n<li>Nodejs &gt;=v14 installed<\/li>\n<\/ul>\n<h2>What Will We Build?<\/h2>\n<p>We will be implementing a card component and populating it with data so we can test the infinite scrolling. The complete code is on <a href=\"https:\/\/codesandbox.io\/embed\/react-infinte-scroll-lko9hq?autoresize=1&amp;fontsize=14&amp;hidenavigation=1&amp;theme=dark\">Codesandbox<\/a><a href=\"https:\/\/codesandbox.io\/embed\/angry-faraday-lko9hq?autoresize=1&amp;fontsize=14&amp;hidenavigation=1&amp;moduleview=1&amp;theme=dark\">.<\/a><\/p>\n<h2>Getting Started With React Infinite Scroll Lazy Load<\/h2>\n<p>Let\u2019s set up our React application by running the command below:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npx create-react-app lazy-loading-infinite-scroll\n<\/code><\/span><\/pre>\n<h2>Implementing the Card Component<\/h2>\n<p>We will be using the <code>react-bootstrap<\/code> package for styling our card components. Install it by running this command on your terminal:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm install react-bootstrap bootstrap\n<\/code><\/span><\/pre>\n<p>Create a <code>component<\/code> folder from the <code>src<\/code> directory and create a <code>CardComponent.jsx<\/code> file.  Run this command to do that:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">cd<\/span> <span class=\"hljs-selector-tag\">src<\/span>\n<span class=\"hljs-selector-tag\">mkdir<\/span> <span class=\"hljs-selector-tag\">components<\/span> &amp;&amp; <span class=\"hljs-selector-tag\">cd<\/span> <span class=\"hljs-selector-tag\">components<\/span>\n<span class=\"hljs-selector-tag\">touch<\/span> <span class=\"hljs-selector-tag\">CardComponent<\/span><span class=\"hljs-selector-class\">.jsx<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Add this code snippet to <code>CardComponent.jsx<\/code><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/CardComponent.jsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> { Card, Button, Container, Col, Row } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-bootstrap'<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">CardComponent<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Container<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Row<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Col<\/span> <span class=\"hljs-attr\">md<\/span>=<span class=\"hljs-string\">{4}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">width:<\/span> '<span class=\"hljs-attr\">18rem<\/span>' }}&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Img<\/span> <span class=\"hljs-attr\">variant<\/span>=<span class=\"hljs-string\">\"top\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1652512456007-e16ac46f1879?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1100&amp;q=80\"<\/span> \/&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Body<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Title<\/span>&gt;<\/span>card title<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card.Title<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Text<\/span>&gt;<\/span>\n                                this is an infinite scroll Up\n                            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card.Text<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Button<\/span> <span class=\"hljs-attr\">variant<\/span>=<span class=\"hljs-string\">\"primary\"<\/span>&gt;<\/span>Up<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card.Body<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Col<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Row<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Container<\/span>&gt;<\/span><\/span>\n    )\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here, we use react-bootstrap components to implement our Card Component. If you\u2019ve noticed, we are not importing React, cause it\u2019s not needed anymore.<\/p>\n<p>Let\u2019s head over to <code>App.js<\/code>  and register our card component.  Add the code snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/App.js<\/span>\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'bootstrap\/dist\/css\/bootstrap.min.css'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { lazy, Suspense } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> CardComponent = lazy(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-keyword\">import<\/span>(<span class=\"hljs-string\">\".\/components\/CardComponent\"<\/span>))\n    \n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>React Lazy Loading with Infinite Scroll<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Suspense<\/span> <span class=\"hljs-attr\">fallback<\/span>=<span class=\"hljs-string\">{<\/span>&lt;<span class=\"hljs-attr\">div<\/span>&gt;<\/span>isLoading...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>}&gt;\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CardComponent<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Suspense<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n}\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Firstly, we start by importing bootstrap CSS so it can be accessed globally in the project.\nNext, we use the <code>React.lazy<\/code> function from React which takes a function that calls a dynamic <code>import()<\/code>. This function must return a Promise which resolves to a module with a default export containing a React component.\nThe lazy component (<code>CardComponent<\/code> in our case) will then be rendered inside the Suspense Component. The Suspense component allows us to have a fallback function that will be used to render a loader before the lazy components finish loading.<\/p>\n<p>Let\u2019s now run our app. Run this command on your terminal<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm run start \n<\/code><\/span><\/pre>\n<p>You should see something like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_24C003D3766446370740089C4B6DA206FDFDF0978DD9CD6E0B46E2EF3368ACDC_1656871622052_Screenshot+2022-07-03+at+19.06.44.png\" alt=\"Image showing a screenshot demonstrating the React lazy load CSS set up with a single image loaded\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1099\"\/><\/p>\n<p>If you\u2019ve gotten to this stage, you\u2019re Awesome! Now that we\u2019ve handled React lazy load, let\u2019s implement Infinite scroll.<\/p>\n<h2>Implementing Infinite Scroll<\/h2>\n<p>Now that lazy loading is implemented on the Card component, we will implement infinite scroll for the cards, such that once the user reaches the bottom of the page, it automagically adds datasets or makes an API call without the need for pagination buttons.<\/p>\n<p>First, we will create some mock data for our cards. This will be the dataset that will be used to loop through and display on the Card components. Create a <code>mock.js<\/code> file in the source directory and paste these lines of code<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/mock.js<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> cardData = &#91;{\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"card title\"<\/span>,\n    <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"Down\"<\/span>,\n    <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n},\n{\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"card title\"<\/span>,\n    <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"Up\"<\/span>,\n    <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n},\n{\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"card title\"<\/span>,\n    <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"Left\"<\/span>,\n    <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n},\n{\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"card title\"<\/span>,\n    <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"right\"<\/span>,\n     <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n},\n{\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"card title\"<\/span>,\n    <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"right\"<\/span>,\n    <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n},\n{\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"card title\"<\/span>,\n    <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"right\"<\/span>,\n    <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n},\n{\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"card title\"<\/span>,\n    <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"right\"<\/span>,\n    <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n},\n{\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"card title\"<\/span>,\n    <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"right\"<\/span>,\n    <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n},\n{\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"card title\"<\/span>,\n    <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"right\"<\/span>,\n    <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n}\n]\n    \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, navigate to <code>App.js<\/code> and import the mock data. Modify the <code>App.js<\/code>  and add this line<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/App.js<\/span>\n<span class=\"hljs-keyword\">import<\/span> { cardData } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/mock'<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, we will pass <code>cardData<\/code> as props to our <code>CardWrapper<\/code> Component. Update this line in <code>App.js<\/code> with this<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\/\/App.js\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CardComponent<\/span> <span class=\"hljs-attr\">cardData<\/span>=<span class=\"hljs-string\">{cardData}<\/span> \/&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now we have passed our data to the Card component, let\u2019s implement the infinite scroller.<\/p>\n<p>We will be using an external react library called <code>react-infinite-scroller<\/code>.<\/p>\n<p>First, we need to install the package. To do that run the command below<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm install react-infinite-scroller\n<\/code><\/span><\/pre>\n<p>Next is to implement the infinite scroll which will be inside the card components. Navigate to Card component and update the code with the below.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Card, Button, Container, Col, Row } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-bootstrap'<\/span>\n<span class=\"hljs-keyword\">import<\/span> InfiniteScroll <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-infinite-scroller'<\/span>; <span class=\"hljs-comment\">\/\/new<\/span>\n    \n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">CardComponent<\/span>(<span class=\"hljs-params\">{ cardData }<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> &#91;data, setData] = useState(cardData) <span class=\"hljs-comment\">\/\/new<\/span>\n       \n    <span class=\"hljs-keyword\">const<\/span> loading = <span class=\"hljs-keyword\">async<\/span> () =&gt; { <span class=\"hljs-comment\">\/\/new<\/span>\n        <span class=\"hljs-keyword\">const<\/span> newCardData = &#91;\n            {\n                <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"New card title\"<\/span>,\n                <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"right\"<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n            },\n            {\n                <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"New card title\"<\/span>,\n                <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"right\"<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n            },\n            {\n                <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"New card title\"<\/span>,\n                <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">\"right\"<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"this is an infinite scroll\"<\/span>\n            }\n        ]\n        <span class=\"hljs-keyword\">if<\/span> (data.length &lt;= <span class=\"hljs-number\">20<\/span>) { <span class=\"hljs-comment\">\/\/new<\/span>\n            <span class=\"hljs-keyword\">await<\/span> setData(<span class=\"hljs-function\">(<span class=\"hljs-params\">data<\/span>) =&gt;<\/span> &#91;...data, ...newCardData])\n        }\n    }\n\n<span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Container<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">InfiniteScroll<\/span> \/\/<span class=\"hljs-attr\">new<\/span>\n            <span class=\"hljs-attr\">pageStart<\/span>=<span class=\"hljs-string\">{0}<\/span>\n            <span class=\"hljs-attr\">loadMore<\/span>=<span class=\"hljs-string\">{loading}<\/span>\n            <span class=\"hljs-attr\">hasMore<\/span>=<span class=\"hljs-string\">{true<\/span> || <span class=\"hljs-attr\">false<\/span>}\n            <span class=\"hljs-attr\">loader<\/span>=<span class=\"hljs-string\">{<\/span>&lt;<span class=\"hljs-attr\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"loader\"<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{0}<\/span>&gt;<\/span>Loading ...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>}\n        &gt;\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Row<\/span>&gt;<\/span>\n                {data.map((data, index) =&gt; ( \/\/new\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Col<\/span> <span class=\"hljs-attr\">md<\/span>=<span class=\"hljs-string\">{4}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{index}<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">width:<\/span> '<span class=\"hljs-attr\">18rem<\/span>' }}&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Img<\/span> <span class=\"hljs-attr\">variant<\/span>=<span class=\"hljs-string\">\"top\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1652512456007-e16ac46f1879?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1100&amp;q=80\"<\/span> \/&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Body<\/span>&gt;<\/span>\n                                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Title<\/span>&gt;<\/span>{data.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card.Title<\/span>&gt;<\/span>\n                                 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Text<\/span>&gt;<\/span>\n                                    {data.description}\n                                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card.Text<\/span>&gt;<\/span>\n                                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Button<\/span> <span class=\"hljs-attr\">variant<\/span>=<span class=\"hljs-string\">\"primary\"<\/span>&gt;<\/span>{data.buttonName}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Button<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card.Body<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Col<\/span>&gt;<\/span>\n                )\n                )}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Row<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">InfiniteScroll<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Container<\/span>&gt;<\/span><\/span>\n)\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Let\u2019s break down this code snippet into chunks.<\/p>\n<p>First, we imported the <code>InfiniteScroll<\/code> component from <code>react-infinite-scroller<\/code>. The <code>InfiniteScroll<\/code> component accepts parameters as follows:<\/p>\n<p><em><strong>pageStart<\/strong><\/em>**={0}** = This accept the page number, mostly when connecting to an API endpoint\n<em><strong>loadMore<\/strong><\/em>**={ }** = This is accept the function that will run when the scroll reaches bottom\n<em><strong>hasMore<\/strong><\/em>**={true || false}** = This accept a boolean value\n<em><strong>loader<\/strong><\/em>**={}** = this allows us to pass a loader.<\/p>\n<p>Next, we set the <code>cardData<\/code> we passed from our parent component with React useState hook.<\/p>\n<p>Then we have the async loading function that pushes more values to the dataset since we are not using getting data from an API.<\/p>\n<p>Finally, we loop through the <code>cardData<\/code> and use it in the template.<\/p>\n<p>Save and run the app.  You should get something like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_1B9CB98C2F39F3D4BCE20A368673FFE73C2F20DCC4B574C87B2885C33167393C_1653579068910_Animation.gif\" alt=\"Image showing a GIF screenshot demonstrating a lazy scrolling example using React\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1912\" height=\"971\"\/><\/p>\n<p><img decoding=\"async\" src=\"\/static\/img\/pixel.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\" \/><\/p>\n<h2>Conclusion<\/h2>\n<p>Infinite scrolling is essential for large datasets cause the user experience is smooth compared to pagination. In this tutorial, we implemented infinite scroll with <a href=\"https:\/\/www.npmjs.com\/package\/react-infinite-scroller\">react-infinite-scroller<\/a> and lazy loading react components with <code>React.lazy<\/code> and <code>Suspense<\/code>.<\/p>\n<p>Happy coding! And before you go, we invite you to see how <a href=\"https:\/\/cloudinary.com\/developers\">Cloudinary helps developers<\/a> like you create beautiful and user-first experiences while saving you tons of effort.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":28315,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246],"class_list":["post-28314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Implement React Infinite Scroll Lazy Load in CSS<\/title>\n<meta name=\"description\" content=\"In this guide, you\u2019ll learn how to set up React lazy load for infinite scroll to replace pagination to create a more user-friendly experience on your website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Implement Infinite Scroll Lazy Load With React\" \/>\n<meta property=\"og:description\" content=\"In this guide, you\u2019ll learn how to set up React lazy load for infinite scroll to replace pagination to create a more user-friendly experience on your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-08T13:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-20T22:50:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1912\" \/>\n\t<meta property=\"og:image:height\" content=\"971\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"How to Implement Infinite Scroll Lazy Load With React\",\"datePublished\":\"2023-05-08T13:00:00+00:00\",\"dateModified\":\"2025-10-20T22:50:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll\",\"url\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll\",\"name\":\"How to Implement React Infinite Scroll Lazy Load in CSS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA\",\"datePublished\":\"2023-05-08T13:00:00+00:00\",\"dateModified\":\"2025-10-20T22:50:49+00:00\",\"description\":\"In this guide, you\u2019ll learn how to set up React lazy load for infinite scroll to replace pagination to create a more user-friendly experience on your website.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA\",\"width\":1912,\"height\":971,\"caption\":\"Image showing a screenshot demonstrating the React lazy load list on scroll set up with multiple images loaded\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Implement Infinite Scroll Lazy Load With React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Implement React Infinite Scroll Lazy Load in CSS","description":"In this guide, you\u2019ll learn how to set up React lazy load for infinite scroll to replace pagination to create a more user-friendly experience on your website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll","og_locale":"en_US","og_type":"article","og_title":"How to Implement Infinite Scroll Lazy Load With React","og_description":"In this guide, you\u2019ll learn how to set up React lazy load for infinite scroll to replace pagination to create a more user-friendly experience on your website.","og_url":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll","og_site_name":"Cloudinary Blog","article_published_time":"2023-05-08T13:00:00+00:00","article_modified_time":"2025-10-20T22:50:49+00:00","og_image":[{"width":1912,"height":971,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"How to Implement Infinite Scroll Lazy Load With React","datePublished":"2023-05-08T13:00:00+00:00","dateModified":"2025-10-20T22:50:49+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","React"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll","url":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll","name":"How to Implement React Infinite Scroll Lazy Load in CSS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA","datePublished":"2023-05-08T13:00:00+00:00","dateModified":"2025-10-20T22:50:49+00:00","description":"In this guide, you\u2019ll learn how to set up React lazy load for infinite scroll to replace pagination to create a more user-friendly experience on your website.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA","width":1912,"height":971,"caption":"Image showing a screenshot demonstrating the React lazy load list on scroll set up with multiple images loaded"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/lazy-loading-with-infinite-scroll#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Implement Infinite Scroll Lazy Load With React"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924216\/Web_Assets\/blog\/lazy-loading\/lazy-loading.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28314"}],"version-history":[{"count":7,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28314\/revisions"}],"predecessor-version":[{"id":39504,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28314\/revisions\/39504"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28315"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}