Smarter React Apps in 2025: Lazy Loading, Code Splitting & Suspense

Author: Kawser Ferdous Safi | Full Stack Developer (MERN Stack)
Published: May 4, 2025

🚀 Why Performance Matters in 2025

Modern users expect fast, responsive web applications. Long load times or heavy bundles can negatively impact UX and SEO. Luckily, React provides powerful tools—Lazy Loading, Code Splitting, and Suspense—to optimize performance without compromising user experience.

📦 What is Code Splitting?

Code splitting breaks your app into smaller chunks so it loads only what's necessary. It helps reduce initial bundle size, improve load times, and defer loading until needed.

React supports code splitting via:

• React.lazy() for components
• Dynamic import()
• Webpack’s built-in chunking support

💤 Lazy Loading Components with React.lazy()

Lazy loading delays the loading of a component until it’s needed, improving the app’s performance.

✅ Basic Component Lazy Load

Copy
1import React, { Suspense } from 'react';
2
3const LazyDashboard = React.lazy(() => import('./Dashboard'));
4
5function App() {
6  return (
7    <div>
8      <Suspense fallback={<p>Loading Dashboard...</p>}>
9        <LazyDashboard />
10      </Suspense>
11    </div>
12  );
13}

⚠️ Remember

• Suspense must wrap any React.lazy() component.
• Always provide a meaningful fallback (like a loader).

🌐 Lazy Loading Data with Suspense (Experimental Feature)

React also aims to support data-fetching with Suspense, using frameworks like React Server Components, Relay, or React Query + Suspense combo.

Example with React Query:

Copy
1import { useQuery } from 'react-query';
2
3function UserProfile() {
4  const { data, isLoading } = useQuery('user', fetchUser);
5
6  if (isLoading) return <p>Loading user...</p>;
7
8  return <div>{data.name}</div>;
9}

Future versions of React will allow using Suspense directly for loading states.

🔄 Infinite Scroll with Lazy Fetched Data

Example using Intersection Observer to fetch more data lazily:

Copy
1import React, { useEffect, useRef, useState } from 'react';
2
3function InfinitePosts() {
4  const [posts, setPosts] = useState([]);
5  const [page, setPage] = useState(1);
6  const loader = useRef(null);
7
8  useEffect(() => {
9    const fetchPosts = async () => {
10      const res = await fetch(`/api/posts?page=${page}`);
11      const data = await res.json();
12      setPosts(prev => [...prev, ...data]);
13    };
14    fetchPosts();
15  }, [page]);
16
17  useEffect(() => {
18    const observer = new IntersectionObserver(entries => {
19      if (entries[0].isIntersecting) {
20        setPage(prev => prev + 1);
21      }
22    });
23    if (loader.current) observer.observe(loader.current);
24    return () => observer.disconnect();
25  }, []);
26
27  return (
28    <div>
29      {posts.map((post, index) => (
30        <div key={index}>{post.title}</div>
31      ))}
32      <div ref={loader}>Loading more...</div>
33    </div>
34  );
35}

📌 Best Practices for Lazy Loading & Code Splitting

• ✅ Use React.lazy() for large components (e.g., dashboards, modals, feature modules)
• ✅ Group related components into bundles using dynamic import()
• ✅ Use Suspense with fallback UI to keep UX smooth
• ✅ Combine with React.memo, useMemo, and useCallback for max performance

⚠️ Pitfalls to Avoid

• ❌ Don’t wrap everything in Suspense—only what needs lazy loading
• ❌ Avoid lazy loading very small components—it adds overhead
• ❌ Forgetting fallback can crash your UI

✅ Final Thoughts

Performance is a feature.

React’s built-in features like Lazy Loading, Code Splitting, and Suspense give you everything you need to build high-performance, user-friendly apps in 2025.

By implementing these smart loading patterns, you reduce load times, optimize rendering, and create seamless, scalable user experiences.

- Kawser Ferdous Safi