{"id":613,"date":"2019-02-17T23:54:21","date_gmt":"2019-02-17T23:54:21","guid":{"rendered":"http:\/\/upmostlymulti.onpressidium.com\/?p=613"},"modified":"2022-10-28T11:05:48","modified_gmt":"2022-10-28T16:05:48","slug":"build-an-infinite-scroll-component-in-react-using-react-hooks","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/build-an-infinite-scroll-component-in-react-using-react-hooks","title":{"rendered":"Build an Infinite Scroll Component in React using React Hooks"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Today we’re going to dive deeper into React development and learn how to build an infinite scroll component in React using React Hooks. If you are just starting out with React hooks make sure to check out this guide<\/a>. If not, Let’s get started!<\/p>\n\n\n\n

\n
\n
View Demo<\/a><\/div>\n<\/div>\n\n\n\n
\n
View Code<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n

What We’re Building<\/h2>\n\n\n\n
\"A
What we’re building — an infinite scroll component that uses React Hooks!<\/figcaption><\/figure>\n\n\n\n

You may not have heard of an infinite scroller before, but if you’ve ever used Facebook, Instagram or Reddit, you’ve definitely used one.<\/p>\n\n\n\n

An infinite scroller is a modern alternative to pagination. <\/p>\n\n\n\n

Rather than wait for the user to click next page<\/em>, new content is automatically loaded every time the user reaches the bottom of the page. Therefore, there’s a never-ending supply of content for the user to read through.<\/p>\n\n\n\n

Setting Up our Infinite Scroll Component<\/h2>\n\n\n\n

If you have an existing React project that you want to add the infinite scroller functionality to, you can skip this section.<\/p><\/blockquote>\n\n\n\n

For everyone else, the easiest way to get started is to use Create React App<\/a> to create a brand new React project. Check out this guide to creating your first React app<\/a>.<\/p>\n\n\n\n

Once you have the app up and running, strip out all of the unneccesary code from the App.js<\/span><\/strong> component, so it looks like this:<\/p>\n\n\n\n

I’m using Bootstrap in this tutorial. If you want to add bootstrap to your new React project, run the following command in your terminal at your root project directory: npm<\/g> install –save bootstrap.<\/p><\/blockquote>\n\n\n\n

import React from 'react';\n\nconst App = () => (\n  <div className=\"container\">\n    <div className=\"row\">\n      <div className=\"col-6 justify-content-center my-5\">\n        ...\n      <\/div>\n    <\/div>\n  <\/div>\n);\n\nexport default App;<\/code><\/pre>\n\n\n\n
Building the List Component<\/h2>\n\n\n\n
Infinite scroll works great for loading lists of things like photos, status updates, and table data.<\/p>\n\n\n\n
In this<\/g> tutorial, we’ll stick to showing a simple list of numbers, but by the end of this tutorial, you’ll be able to use what you’ve built for any type of list.<\/p>\n\n\n\n
Create a new file called\u00a0List.js<\/mark><\/strong>\u00a0inside of the src directory, and fill it with the following code:<\/p>\n\n\n\n
import React, { useState } from 'react';\n\nconst List = () => {\n  const [listItems, setListItems] = useState(Array.from(Array(30).keys(), n => n + 1));\n  \n  return (\n    <>\n      <ul className=\"list-group mb-2\">\n        {listItems.map(listItem => <li className=\"list-group-item\">List Item {listItem}<\/li>)}\n      <\/ul>\n    <\/>\n  );\n};\n\nexport default List;<\/code><\/pre>\n\n\n\n
We do a few things using the code above:<\/p>\n\n\n\n