Introduction
With the rapid evolution of web design and user experience principles, infinite scrolling has become a prominent feature, especially on social media platforms, e-commerce sites, and content-rich websites. But what exactly is infinite scrolling?
Infinite scrolling is a web design technique that allows users to scroll through content continuously without pagination or clicking "Next" buttons. As the user nears the end of the displayed content, more content is fetched and shown automatically, giving the illusion of an "infinite" amount of data. This technique keeps users engaged; they don't need to interrupt their browsing to load more content.
In this guide, we'll implement infinite scrolling by building a card-based planet explorer. As the user scrolls, they'll discover more planets and enjoy a seamless user experience. Alongside crafting this application, we'll explore the potential performance issues infinite scrolling can present and reveal optimization strategies to mitigate them.
Curious to see what's in store? Here's a sneak peek of our final product:
You can check out the live demo here and find the complete source code on GitHub here.
Prerequisites
Before we begin, there are a few prerequisites you should have:
Basic Understanding of HTML, CSS, and JavaScript: A foundational knowledge of HTML, CSS, and JavaScript will be incredibly helpful.
React Knowledge: Since we're using React to build our application, having a grasp of its concepts and how components work will be valuable. If you're new to React, refer to the official React documentation for a quick overview.
Node.js and npm: You'll need Node.js and npm (Node Package Manager) installed on your system. If you haven't installed them, you can download and install them from the official Node.js website.
Git: Ensure you have Git installed on your machine. If not, you can download it from the Git website.
Getting Started
Before we can start building our planet explorer, we need a foundation. Fortunately, to save time on boilerplate code and focus on the goal of our project, there's a starter template in a separate branch prepared for you.
This template already contains a predefined folder structure and essential components, so we're not starting from scratch.
Cloning the Starter Template
To get your hands on the starter template, run the following commands:
git clone https://github.com/TropicolX/space-explorer-scroll.git
cd space-explorer-scroll
git checkout starter
npm install
With this, you'll have all the necessary files and dependencies installed.
Exploring the Folder Structure
Let's familiarize ourselves with the structure of our workspace:
-
/src
: This is where the core of our project resides.-
/components
: A directory for our React components.-
/PlanetImages
: Contains individual JSX files for each planet image and random ones for our infinite scroll. -
Planet.jsx
: This component will render individual planet cards. -
Stars.jsx
: To create the starry background effect.
-
App.css
: Main styling file for our application.App.jsx
: The heart of our project, where we will manage our state and render the main components.index.css
: Contains global styles.main.jsx
: The entry point for our React app.utils.js
: This file contains utility functions like the function for generating random colors for our planets.
-
Now we've set up our workspace, let's jump into crafting the main structure of our space explorer.
Building the Basic Structure
Let's get started by setting up the interface for the planet explorer. The app should contain a list of cards where each card represents a planet with an image on the left and details about the planet on the right.
To begin, launch the development server by navigating to the project directory and entering the following command:
npm run dev
We should have something similar to what we have below:
Next, let's set up our initial planets list. Add the following code to the App.jsx
file:
import { useState } from "react";
import Planet from "./components/Planet";
...
function App() {
const [planets, setPlanets] = useState(planetsInSolarSystem);
return (
<div className="universe">
...
<div className="planets">
{planets.map((planet) => (
<Planet key={planet.name} data={planet} />
))}
</div>
</div>
);
}
export default App;
In the code above:
We initiate the
planets
state with an array of planet objects.We then map through the
planets
array to render a list ofPlanet
components.
With the basic structure set up, our application should display a list of planets in a card format.
Implementing Infinite Scroll using Intersection Observer
Understanding Intersection Observer
The Intersection Observer API is a powerful tool that allows you to efficiently track and respond to changes in the visibility of an element in relation to its parent container or the viewport.
In our case, we'll use it to detect when a loading spinner element comes into the viewport. When it does, this will be our cue to load more planet cards.
If you want to gain a better understanding of the Intersection Observer API, the Mozilla Developer Network (MDN) documentation is a great resource to consult.
Setting up the Observer
To set up the observer, we first need a reference to the element we want to observe. Let's add the loading spinner under our list in App.jsx
:
...
<div className="planets">
{planets.map((planet) => (
<Planet key={planet.name} data={planet} />
))}
</div>
<div ref={loaderRef} className="spinner"></div>
...
Now, let's dive into the logic. Add the following code snippet:
import { useState, useEffect, useRef, useCallback } from "react";
...
function App() {
const [planets, setPlanets] = useState(...);
const [offset, setOffset] = useState(0);
const loaderRef = useRef(null);
const loadMorePlanets = useCallback(async () => {
try {
const response = await fetch(
`https://planets-api-rho.vercel.app/api/planets?offset=${offset}`
);
const data = await response.json();
setPlanets([...planets, ...data]);
setOffset((previousOffset) => previousOffset + limit);
} catch (error) {
console.error(error);
}
}, [offset, planets]);
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
const firstEntry = entries[0];
if (firstEntry.isIntersecting) {
// Load more planets when the loader is visible
loadMorePlanets();
}
});
if (loaderRef.current) {
observer.observe(loaderRef.current);
}
// Clean up the observer on component unmount
return () => observer.disconnect();
}, [loadMorePlanets]);
return (
...
);
}
Let's break down each section of the code:
-
State Management and Data Fetching:
-
offset
keeps track of the current offset for fetching more planets. -
loaderRef
is used to keep a reference of the loading spinner element. - The
loadMorePlanets
function is defined using theuseCallback
hook. This optimization ensures that the function reference remains constant across renders unless its dependencies (offset
andplanets
) change. - In the
loadMorePlanets
function, we asynchronously fetch planet data from a remote API using thefetch
function. We're appending theoffset
parameter to paginate the data. Once we receive the data, we concatenate it with the existing planets, update theplanets
state, and update theoffset
for future pagination.
-
-
Intersection Observer for Infinite Scroll:
- Inside the
useEffect
hook, we create an instance ofIntersectionObserver
to monitor the visibility of the loading spinner. The constructor takes a callback function and invokes it whenever an observed element's intersection status changes. - Inside the callback function, we access the
entries
parameter, representing an array of observed elements. We're observing just one element (our loading spinner), so we access the first entry usingentries[0]
. - When the loading spinner becomes visible in the viewport (
isIntersecting
istrue
), the callback function triggers theloadMorePlanets
function to fetch more planets. - After setting up the Intersection Observer, we attach it to the
loaderRef.current
element. - The observer is disconnected when the component unmounts to prevent memory leaks.
- The
useEffect
hook has[loadMorePlanets]
as its dependency, ensuring it responds to changes in theloadMorePlanets
function. This dependency is essential because theloadMorePlanets
function reference may change due to its dependencies.
- Inside the
And with that, you've implemented an infinite scroll! As users scroll down, the Intersection Observer will detect when the loader becomes visible and trigger the loadMorePlanets
function.
Optimizations and Considerations
Infinite scroll, while visually pleasing and user-friendly, has some caveats. Performance issues might emerge as you keep appending items to the DOM, especially on devices with limited resources. Let's discuss how to counteract these concerns and optimize for the best performance.
Potential Performance Issues with Infinite Content Addition
Every time the user gets close to the bottom of the page, and new content is fetched and rendered, we add more nodes to the DOM. As the content grows, this could:
Increase Memory Usage: Each new DOM element takes up memory. As we infinitely append more elements, this could slow down devices, especially older ones.
Increase CPU Usage: Especially with complex layouts and CSS styles/animations. As the number of elements grows, operations like layout recalculations could take longer.
Introduction to Virtualized Lists for Performance Enhancement
One popular optimization is the use of virtualized lists (or windowing). The concept is simple: only render the items currently in view (or slightly offscreen) and recycle the DOM nodes as the user scrolls. Virtualized lists provide various benefits, such as:
Consistent Performance: By rendering only a subset of the items, memory and CPU usage remain largely constant, regardless of the list's total size.
Faster Initial Render: As the page renders fewer items initially, it can load and become interactive faster.
For React, libraries like react-window
or react-virtualized
provide components and hooks to enable this functionality. If you decide to dive into this territory, they are an excellent place to start!
Tools and Libraries for Further Optimization
React-query or SWR: If you're fetching data from an API, libraries like
react-query
orSWR
can handle caching, background data fetching, and other optimizations out of the box.React Infinite Scroll Component: To simplify the process of implementing infinite scroll, you might consider using libraries like
react-infinite-scroll-component
. These libraries provide pre-built components that handle much of the complexity for you. They offer features like automatic loading, loading indicators, and customizable thresholds for triggering the loading of more content.
Conclusion
In this guide, we implemented infinite scrolling within a React application. We started by crafting our planet explorer's user interface. Then, we implemented the infinite scroll feature, allowing users to discover new planets continuously.
Finally, we discussed potential pitfalls and the technical optimizations that one should consider for maintaining performance and user satisfaction.
When implemented thoughtfully, infinite scroll can significantly improve user engagement and make content consumption seamless. However, it's essential to remember that, like any tool, it's most effective when suited to the content and the user's needs.
If you found this article useful or learned something new, please consider showing your support by liking it and following me for updates on future posts.
You can also connect with me on Twitter, LinkedIn, and GitHub!
Till next time, happy coding!
Top comments (0)