A Complete Guide with a Cheat Sheet and Example
<h4>Brief Introduction</h4>
Lazy loading is an effective performance optimization technique in web development, particularly with libraries and frameworks like React. It involves loading components or resources only when needed, either in response to a user action or when elements are about to be displayed on the screen. This can reduce the initial load time of the application, decrease resource consumption, and improve user experience, especially on devices with limited performance or slow internet connections.
<hr>
<h4>How Lazy Loading Works in React</h4>
React implements lazy loading primarily through the <code>React.lazy</code> function. It is often used in combination with <code>React.Suspense</code>, which handles the loading state and fallback UI. Below are the key steps to understand how to implement lazy loading in a React application.
<hr>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mulcggv57l7pcjocymh.gif" alt="gif">
1. Dynamic Import with <code>React.lazy</code>
<code>React.lazy</code> enables dynamic import of components only when required. The result is a promise that resolves to a module containing a default React component.
<pre><code class="language-javascript">const DelayedComponent = React.lazy(() =&gt; import(&#x27;./DelayedComponent&#x27;));
</code></pre>
In this example, <code>DelayedComponent</code> is loaded only when React attempts to render it for the first time.
<hr>
2. Wrapping with <code>React.Suspense</code>
To handle the loading state, <code>React.Suspense</code> is used to wrap lazily loaded components. This allows you to display fallback content (e.g., a loading spinner) while the component is loading.
<pre><code class="language-javascript">import React, { Suspense } from &#x27;react&#x27;;

function App() {
 return (
 &lt;div&gt;
 &lt;Suspense fallback={&lt;div&gt;Loading content...&lt;/div&gt;}&gt;
 &lt;DelayedComponent /&gt;
 &lt;/Suspense&gt;
 &lt;/div&gt;
 );
}
</code></pre>
In the above snippet, <code>&lt;Suspense&gt;</code> waits for <code>DelayedComponent</code> to load before displaying it. If loading takes time, the user will see “Loading content…”.
<hr>
3. Error Handling
With lazy loading, error handling is essential in case of failures (e.g., a network outage). You can display an error message or a fallback component if something goes wrong during the loading process.
<hr>
4. Integration with Routing
Lazy loading is particularly useful in the context of routing, where different screens or components are loaded based on the URL. With routers like React Router, you can use <code>React.lazy</code> to dynamically load components for each route.
<pre><code class="language-javascript">import { BrowserRouter as Router, Route, Switch } from &#x27;react-router-dom&#x27;;
import React, { Suspense } from &#x27;react&#x27;;

const HomeView = React.lazy(() =&gt; import(&#x27;./HomeView&#x27;));
const AboutView = React.lazy(() =&gt; import(&#x27;./AboutView&#x27;));

function App() {
 return (
 &lt;Router&gt;
 &lt;Suspense fallback={&lt;div&gt;Loading views...&lt;/div&gt;}&gt;
 &lt;Switch&gt;
 &lt;Route path=&quot;/about&quot; component={AboutView} /&gt;
 &lt;Route path=&quot;/&quot; component={HomeView} /&gt;
 &lt;/Switch&gt;
 &lt;/Suspense&gt;
 &lt;/Router&gt;
 );
}
</code></pre>
In this case, <code>HomeView</code> and <code>AboutView</code> are loaded only when their respective routes are accessed.
<hr>
<h4>Why Is Lazy Loading Useful?</h4>
<ul>
<li>Faster Initial Load: By loading only the essential parts of your app at first, the initial load time is reduced.</li>
<li>Reduced Resource Usage: Lazy loading helps conserve bandwidth and system resources by loading components only when they are needed.</li>
<li>Improved User Experience: Users get a quicker response since they don’t have to wait for everything to load before interacting with the app.</li>
</ul>
<h3>Conclusion</h3>
Lazy loading and code splitting are powerful tools to enhance web performance, making them essential for building fast and responsive applications
Citations:
React, “Lazy Loading”, <a href="https://react.dev/learn" target="_blank" rel="noopener nofollow">https://react.dev/learn</a>

Dedicated to developers who want to learn and share how they git gud at their craft 🦾. Is there a mindset you think is currently hurting developers growth? What tools do you love? 

The Dev Craft

Lazy loading in React improves performance by loading components only when needed, reducing initial load times and resource usage. It is implemented using the `React.lazy` function for dynamic imports and `React.Suspense` to handle loading states. This technique enhances user experience, especially on devices with limited performance or slow internet connections. Error handling and integration with routing are also key aspects of implementing lazy loading effectively.

React.js Lazy Loading: EXPLAINED