{"id":21157,"date":"2022-10-18T12:54:29","date_gmt":"2022-10-18T19:54:29","guid":{"rendered":"https:\/\/coderpad.io\/?p=21157"},"modified":"2023-06-05T14:01:19","modified_gmt":"2023-06-05T21:01:19","slug":"how-to-implement-infinite-scroll-in-react-js","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/how-to-implement-infinite-scroll-in-react-js\/","title":{"rendered":"How to Implement Infinite Scroll in React.js by Building a TikTok Clone"},"content":{"rendered":"\n

In 2006, Aza Raskin introduced<\/a> the infinite scroll concept, a functionality that would later transform our digital lives. Facebook, TikTok, AliExpress, and Pinterest, to name a few, have all implemented the infinite scroll feature in their stories or feeds.<\/p>\n\n\n\n

Infinite scrolling essentially brings endless information and entertainment to your screen. You keep scrolling and scrolling but never get to the end. Through the years, it has gathered a lot of criticism, even from its creator<\/a>, due to its addictive nature. Regardless, this technology is fascinating from both a behavioral and implementation perspective.<\/p>\n\n\n\n

This article will cover how infinite scrolling works behind the scenes and how TikTok incorporates infinite scrolling. We will also create a TikTok clone with React.js, pure CSS, and free videos from Pexels’ API to understand the implementation process further.<\/p>\n\n\n\n

To be clear, we will mainly implement the mobile version of the TikTok feed rather than building a full-fledged TikTok clone. Here’s a preview of what our application will look like:<\/p>\n\n\n\n

\"\"
A cell phone screenplays short videos of people dancing, cityscapes, and wall decor. The videos change when the user scrolls up.<\/figcaption><\/figure>\n\n\n\n

How infinite scroll works<\/h2>\n\n\n\n

Infinite scroll implementations vary between applications, but the idea behind how they all work is mostly the same. They all rely on asynchronous programming and an API to load content.<\/p>\n\n\n\n

First, you have your application fetch some initial video content once the application has loaded. You also add a listener<\/a> that watches when the user scrolls or when the video ends. When the listener is triggered, the app will asynchronously load new content via the API.<\/p>\n\n\n\n

\"\"
Illustration demonstrating how infinite scrolling works, with three items loaded initially, as well as the caption “user is here<\/strong>,” which points to an arrow depicting the loading of new content from a database or API.<\/figcaption><\/figure>\n\n\n\n

A simple JavaScript-like pseudo code for this process might look like this:<\/p>\n\n\n

function<\/span> getContent<\/span>(n<\/span>) <\/span>{\n  \/\/ Asynchronously load 'n' new post from API<\/span>\n}\n\nwindow<\/span>.addEventListener(\"DOMContentLoaded\"<\/span>, (event) => {\n  getContent(5<\/span>);\n});\n\nwindow<\/span>.addEventListener(\"scroll\"<\/span>, (e) => {\n  if<\/span> (e.scrollY === somePreferredScrollFrame) {\n    getContent(5<\/span>);\n  }\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
How TikTok works<\/h2>\n\n\n\n
TikTok’s feed pretty much works the same way described above; however, the content in TikTok’s case is videos created or shared by other app users. Additionally, TikTok incorporates a unique feature where each video is displayed at full height, separating them from each other, coupled with a smooth scrolling effect that makes scrolling through each video feel satisfying.<\/p>\n\n\n\n
Replicating special features like this one is pretty straightforward with pure CSS. We’ll utilize the scroll-snap and scroll-behavior properties for the scrolling effect. We will fully implement other methods to make the infinite scrolling effect work with native JavaScript.<\/p>\n\n\n\n
How to build a TikTok clone<\/h2>\n\n\n\n
Let’s get started by creating a new React application. To do this, make sure you have npx<\/code> (Node.js<\/a>) installed, and run the following command:<\/p>\n\n\n
npx create-react-app tiktok-clone<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, open the newly created projected folder in your favorite text editor, then run the following command to start the app in your browser:<\/p>\n\n\n
npm start<\/code><\/span><\/pre>\n\n\n
Implement full height scroll-snap & bottom navbar<\/h3>\n\n\n\n
Let’s proceed by creating the TikTok-like scroll-snap and bottom navigation bar components. To do this, create a new components<\/code> directory in the existing \/src<\/code> folder, and create two new files: BottomNav.js<\/code> and VideoCard.js<\/code> in this new directory. With these changes, our file tree should look like this:<\/p>\n\n\n
.\n\u251c\u2500\u2500 . . .\n\u251c\u2500\u2500 public<\/span>\n\u251c\u2500\u2500 src<\/span>\n\u2502   \u251c\u2500\u2500 components<\/span>\n\u2502   \u2502   \u251c\u2500\u2500 BottomNav<\/span>.js<\/span>\n\u2502   \u2502   \u2514\u2500\u2500 VideoCard<\/span>.js<\/span>\n\u2502   \u2514\u2500\u2500 . . .\n\u2514\u2500\u2500 . . .<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Inside the VideoCard.js<\/code> file, paste the code below:<\/p>\n\n\n
const<\/span> VideoCard = ({ index }<\/span>) =><\/span> {\n  return<\/span> (\n    <div<\/span> className<\/span>=\"slider-children\"<\/span>><\/span>\n      <div<\/span>\n        style<\/span>={{<\/span>\n          justifyContent:<\/span> \"center<\/span>\",\n          alignItems:<\/span> \"center<\/span>\",\n          display:<\/span> \"flex<\/span>\",\n          height:<\/span> \"100<\/span>%\",\n        }}\n      ><\/span>\n        <h1<\/span>><\/span>Video {index}<\/h1<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> VideoCard;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The code above creates a new VideoCard<\/code> component that accepts a single prop called index<\/code>and displays this index concatenated with the word “Video.” Importantly, this component also contains the markup and class names that enable the full-height scroll snap effect.<\/p>\n\n\n\n
Inside the BottomNav.js<\/code> file, add the following content:<\/p>\n\n\n
const<\/span> BottomNav = ()<\/span> =><\/span> {\n  return<\/span> (\n    <nav<\/span> className<\/span>=\"bottom-nav\"<\/span>><\/span>\n      <a<\/span> className<\/span>=\"navbar-brand\"<\/span> href<\/span>=\"\/\"<\/span>><\/span>\n        <i<\/span> className<\/span>=\"fa fa-home\"<\/span>><\/span><\/i<\/span>><\/span>\n      <\/a<\/span>><\/span>\n      <a<\/span> className<\/span>=\"navbar-brand\"<\/span> href<\/span>=\"\/\"<\/span>><\/span>\n        <i<\/span> className<\/span>=\"fa fa-search\"<\/span>><\/span><\/i<\/span>><\/span>\n      <\/a<\/span>><\/span>\n      <a<\/span> className<\/span>=\"navbar-brand\"<\/span> href<\/span>=\"\/\"<\/span>><\/span>\n        <i<\/span> className<\/span>=\"fa fa-plus\"<\/span>><\/span><\/i<\/span>><\/span>\n      <\/a<\/span>><\/span>\n      <a<\/span> className<\/span>=\"navbar-brand\"<\/span> href<\/span>=\"\/\"<\/span>><\/span>\n        <i<\/span> className<\/span>=\"fa fa-commenting\"<\/span>><\/span><\/i<\/span>><\/span>\n      <\/a<\/span>><\/span>\n      <a<\/span> className<\/span>=\"navbar-brand\"<\/span> href<\/span>=\"\/\"<\/span>><\/span>\n        <i<\/span> className<\/span>=\"fa fa-user\"<\/span>><\/span><\/i<\/span>><\/span>\n      <\/a<\/span>><\/span>\n    <\/nav<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> BottomNav;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
<link<\/span>\n  rel<\/span>=\"stylesheet\"<\/span>\n  href<\/span>=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.0\/css\/all.min.css\"<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
To sort all CSS related codes, replace the content of the default src\/index.css<\/code> file with the following:<\/p>\n\n\n
* {\n  padding<\/span>: 0<\/span>;\n  margin<\/span>: 0<\/span>;\n  box-sizing<\/span>: border-box;\n}\n\n*::-webkit-scrollbar<\/span> {\n  display<\/span>: none;\n}\n\nhtml<\/span>,\nbody<\/span> {\n  height<\/span>: 100vh<\/span>;\n  overflow<\/span>: hidden;\n  color<\/span>: #fff<\/span>;\n  font-family<\/span>: 'Helvetica Neue'<\/span>, sans-serif;\n}\n\n.slider-container<\/span> {\n  height<\/span>: 100vh<\/span>;\n  overflow-y<\/span>: scroll;\n  scroll-snap-type<\/span>: y mandatory;\n  scroll-behavior<\/span>: smooth;\n}\n\n.slider-children<\/span> {\n  height<\/span>: 100vh<\/span>;\n  scroll-snap-align<\/span>: start;\n  background<\/span>: #000<\/span>;\n  position<\/span>: relative;\n  border<\/span>: 1px<\/span> solid transparent;\n}\n\n.video<\/span> {\n  position<\/span>: absolute;\n  width<\/span>: 100%<\/span>;\n  height<\/span>: 100%<\/span>;\n  object-fit<\/span>: cover;\n}\n\n.video-content<\/span> {\n  padding<\/span>: 10px<\/span>;\n  position<\/span>: relative;\n  top<\/span>: 85%<\/span>;\n  color<\/span>: #fff<\/span>;\n}\n\n.bottom-nav<\/span> {\n  position<\/span>: fixed;\n  right<\/span>: 0<\/span>;\n  bottom<\/span>: 0<\/span>;\n  left<\/span>: 0<\/span>;\n  display<\/span>: flex;\n  justify-content<\/span>: space-between;\n  align-items<\/span>: center;\n  padding<\/span>: 20px<\/span>;\n  background-color<\/span>: #000<\/span>;\n}\n\n.bottom-nav<\/span> a<\/span> {\n  color<\/span>: #fff<\/span>;\n  text-decoration<\/span>: none;\n}\n\n.fa<\/span> {\n  font-size<\/span>: 20px<\/span>;\n}\n\n.fa-plus<\/span> {\n  color<\/span>: #000<\/span>;\n  background<\/span>: #fff<\/span>;\n  padding<\/span>: 3px<\/span> 10px<\/span>;\n  border-radius<\/span>: 10px<\/span>;\n  border<\/span>: 2px<\/span> solid #ff5722c4<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
As you might have noticed, this CSS code contains the styling for achieving the smooth scrolling effect, fixing our navbar to the bottom of the page, a video element we’ll add in the future, and additional styling.<\/p>\n\n\n\n
Finally, to wrap up this section, let’s import the newly created components in our entry file. Open src\/App.js<\/code> and replace its code with the below:<\/p>\n\n\n
import<\/span> { useState, useEffect } from<\/span> \"react\"<\/span>;\n\nimport<\/span> BottomNav from<\/span> \".\/components\/BottomNav\"<\/span>;\nimport<\/span> VideoCard from<\/span> \".\/components\/VideoCard\"<\/span>;\n\nfunction<\/span> App<\/span>(<\/span>) <\/span>{\n  const<\/span> [videos, setvideos] = useState([]);\n\n  const<\/span> getVideos = (length<\/span>) =><\/span> {\n    let<\/span> newVideos = Array<\/span>.from(Array<\/span>(length).keys());\n    setvideos((oldVideos<\/span>) =><\/span> [...oldVideos, ...newVideos]);\n  };\n\n  useEffect(()<\/span> =><\/span> {\n    getVideos(3<\/span>);\n  }, []);\n\n  return<\/span> (\n    <main<\/span>><\/span>\n      <div<\/span> className<\/span>=\"slider-container\"<\/span>><\/span>\n        {videos.length > 0 ? (\n          <><\/span>\n            {videos.map((video, id) => (\n              <VideoCard<\/span> key<\/span>={id}<\/span> index<\/span>={id<\/span> + 1<\/span>} \/><\/span>\n            ))}\n          <\/><\/span>\n        ) : (\n          <><\/span>\n            <h1<\/span>><\/span>Nothing to show here<\/h1<\/span>><\/span>\n          <\/><\/span><\/span>\n        )}\n      <\/div>\n\n      <BottomNav \/<\/span>>\n    <\/main>\n  );\n}\n\nexport default App;<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Furthermore, we used the useEffect hook<\/a> to call the getVideos()<\/code> function once our app was mounted, causing it to add three new items to our videos<\/code> state. And in our markup, we looped over videos<\/code>, rendering the VideoCard<\/code> component for each iteration while also passing the iteration’s id (index) as the index prop for our VideoCard<\/code> component.<\/p>\n\n\n\n
If we preview our application at this point, we should see the following output:<\/p>\n\n\n\n
\"\"
A cell phone screen demonstrates the user scrolling through three different text blocks, each of which is full height and contains white text on a black background.<\/figcaption><\/figure>\n\n\n\n
Suppose your application renders six pieces of content instead of three after completing these steps. In that case, this is due to React StrictMode<\/a> rendering the components twice because we’re in development mode \u2013 one of the impacts of upgrading to React 18<\/a>.<\/p>\n\n\n\n
To fix this, open src\/index.js<\/code> and remove the StrictMode option. Instead of returning:<\/p>\n\n\n
root.render(\n  <React.StrictMode<\/span>><\/span>\n    <App<\/span> \/><\/span>\n  <\/React.StrictMode<\/span>><\/span>\n);<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
You change it to:<\/p>\n\n\n
root.render(\n    <App<\/span> \/><\/span>\n);<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
And everything should work as expected.<\/p>\n\n\n\n
Add infinite scroll <\/h3>\n\n\n\n
For our infinite scroll implementation, we will use the native Intersection Observer<\/a> API, which allows us to asynchronously observe the visibility of an element in our browser’s viewport.<\/p>\n\n\n\n
Our approach to achieving the infinite scroll will be in the following steps:<\/p>\n\n\n\n
    \n
  1. Create a custom is in viewport<\/code> hook (via the Intersection Observer API) to check if an element is currently in the viewport.<\/li>\n\n\n\n
  2. Pass a preferred length to the VideoCard<\/code> component at which we intend to load new content. For example: after the user scrolls to 3\/5 of the screen (in this case, length is 3), load x new content.<\/li>\n\n\n\n
  3. Check if we’ve scrolled to the preferred length defined in step 2 using the is in the viewport and React Ref<\/a> functions.<\/li>\n\n\n\n
  4. Using the condition from the previous step, load new x content and increase the preferred length to a future length we haven’t yet scrolled to.<\/li>\n<\/ol>\n\n\n\n
    To accomplish the first step, create a new useIsInViewport.js<\/code> file in the existing \/src<\/code> directory and paste the following code into it:<\/p>\n\n\n
    import<\/span> { useEffect, useState, useMemo } from<\/span> \"react\"<\/span>;\n\nfunction<\/span> useIsInViewport<\/span>(ref<\/span>) <\/span>{\n  const<\/span> [isIntersecting, setIsIntersecting] = useState(false<\/span>);\n\n  const<\/span> observer = useMemo(\n    ()<\/span> =><\/span>\n      new<\/span> IntersectionObserver(([entry]<\/span>) =><\/span>\n        setIsIntersecting(entry.isIntersecting)\n      ),\n    []\n  );\n\n  useEffect(()<\/span> =><\/span> {\n    observer.observe(ref.current);\n\n    return<\/span> ()<\/span> =><\/span> {\n      observer.disconnect();\n    };\n  }, [ref, observer]);\n\n  return<\/span> isIntersecting;\n}\n\nexport<\/span> default<\/span> useIsInViewport;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here we created a custom hook, useIsInViewport<\/code>, that accepts a ref as its parameter and uses the IntersectionObserver API to check to see if the element with the provided ref is currently in the viewport.<\/p>\n\n\n\n
    For the second step, alter the src\/App.js<\/code> file such that the VideoCard<\/code> component adds a new props entry like this:<\/p>\n\n\n
    <VideoCard<\/span>\n    key<\/span>={id}<\/span>\n    index<\/span>={id<\/span> + 1<\/span>}\n    lastVideoIndex<\/span>={videos.length<\/span> -<\/span> 1<\/span>}\n    getVideos<\/span>={getVideos}<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    The only difference here is that we pass a new parameter, lastVideoIndex<\/code>, and set its value to the length of our original videos (3) – 1. In this manner, we initially load three videos and wish to load fresh content when the user reaches two of the three videos. We also passed the getVideos()<\/code> function as a parameter so we can directly call it from the VideoCard<\/code> component.<\/p>\n\n\n\n
    The final change happens in our VideoCard<\/code> component file. Open src\/components\/VideoCard.js<\/code> and update its code with the one below:<\/p>\n\n\n
    import<\/span> { useRef, useState } from<\/span> \"react\"<\/span>;\n\nimport<\/span> useIsInViewport from<\/span> \"..\/useIsInViewport\"<\/span>;\n\nconst<\/span> VideoCard = ({ index, lastVideoIndex, getVideos }<\/span>) =><\/span> {\n  const<\/span> elementRef = useRef();\n  const<\/span> isInViewport = useIsInViewport(elementRef);\n  const<\/span> [loadNewVidsAt, setloadNewVidsAt] = useState(lastVideoIndex);\n\n  if<\/span> (isInViewport) {\n    if<\/span> (loadNewVidsAt === Number<\/span>(elementRef.current.id)) {\n      \/\/ increase loadNewVidsAt by 2<\/span>\n      setloadNewVidsAt((prev<\/span>) =><\/span> prev + 2<\/span>);\n      getVideos(3<\/span>);\n    }\n  }\n\n  return<\/span> (\n    <div<\/span> className<\/span>=\"slider-children\"<\/span>><\/span>\n      <div<\/span>\n        ref<\/span>={elementRef}<\/span>\n        id<\/span>={index}<\/span>\n        style<\/span>={{<\/span>\n          justifyContent:<\/span> \"center<\/span>\",\n          alignItems:<\/span> \"center<\/span>\",\n          display:<\/span> \"flex<\/span>\",\n          height:<\/span> \"100<\/span>%\",\n        }}\n      ><\/span>\n        <h1<\/span>><\/span>Video {index}<\/h1<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> VideoCard;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here’s a breakdown of what’s happening in this component: We defined a ref, elementRef<\/code>, and added it to our scroll-snap div. We also gave this div a new id and set its value to match the index of current content. We then passed the elementRef<\/code>to the useIsInViewport<\/code> hook to check if it’s currently in viewport.<\/p>\n\n\n\n
    Furthermore, using React’s useState, we defined a new loadNewVidsAt<\/code> state and set its initial value to the lastVideoIndex<\/code> prop we passed previously. We’re doing this to make updating this value more flexible, as we can’t directly alter a prop. <\/p>\n\n\n\n
    Finally, we used an if-statement to check if a video is in the viewport, and if it is, we checked if the id of this current video is equal to the value of loadNewVidsAt<\/code> state (i.e., the value at which we want to load new content). If this condition is met, we load three new videos using getVideos(3)<\/code> and set the loadNewVidsAt<\/code> state to its previous value + 2.<\/p>\n\n\n\n
    And voila! We have successfully implemented infinite scrolling. If you run your application at this point, everything should work as expected, as shown in the image below:<\/p>\n\n\n\n
    \"\"
    A cell phone screen demonstrates the user scrolling through infinite text blocks, each of which is full height and contains white text on a black background.<\/figcaption><\/figure>\n\n\n\n
    However, thus far, we only have infinite text, not infinite videos. Let’s dive right into adding videos in the next section.<\/p>\n\n\n\n
    Update with sample video files<\/h3>\n\n\n\n
    Because our TikTok clone does not support any content publishing, we will instead load videos via a third-party API. I researched for you and discovered that Pexels<\/a> provides an accessible and excellent API for loading community videos and images. The Pexels API is flexible in that we can specify the length of the videos we want to retrieve and filter them by different categories.<\/p>\n\n\n\n
    What you want to do now is go to Pexels’ homepage<\/a> and create a new account. Once you’ve verified your account, go to their API page<\/a> and request a new API. After following the instructions highlighted on this page, you should instantly get your API key. Copy this and keep it in a safe place for now.<\/p>\n\n\n\n
    Next, we want to install the Pexels library in our application. To do this, run the following command:<\/p>\n\n\n
    npm install pexels<\/code><\/span><\/pre>\n\n\n
    Once that’s done, open src\/App.js<\/code> and replace its content with the following code:<\/p>\n\n\n
    import { useState, useEffect } from \"react\"<\/span>;\n\nimport { createClient } from \"pexels\"<\/span>;\n\nimport BottomNav from \".\/components\/BottomNav\"<\/span>;\nimport VideoCard from \".\/components\/VideoCard\"<\/span>;\n\nfunction<\/span> App<\/span>()<\/span> <\/span>{\n  const<\/span> [videos, setvideos] = useState([]);\n  const<\/span> [videosLoaded, setvideosLoaded] = useState(false<\/span>);\n\n  const<\/span> randomQuery = () => {\n    const<\/span> queries = [\"Funny\"<\/span>, \"Art\"<\/span>, \"Animals\"<\/span>, \"Coding\"<\/span>, \"Space\"<\/span>];\n    return<\/span> queries[Math.floor(Math.random() * queries.length)];\n  };\n\n  const<\/span> getVideos = (length) => {\n    \/\/ Replace with your Pexels API Key<\/span>\n    const<\/span> client = createClient(\"YOUR_PEXEL_API_KEY\"<\/span>);\n\n    const<\/span> query = randomQuery();\n    client.videos\n      .search({ query, per_page: length })\n      .then((result) => {\n        setvideos((oldVideos) => [...oldVideos, ...result.videos]);\n        setvideosLoaded(true<\/span>);\n      })\n      .catch<\/span>((e) => setvideosLoaded(false<\/span>));\n  };\n\n  useEffect(() => {\n    getVideos(3<\/span>);\n  }, []);\n\n  return<\/span> (\n    <main>\n      <div className=\"slider-container\"<\/span>>\n        {videos.length > 0<\/span> ? (\n          <>\n            {videos.map((video, id) => (\n              <VideoCard\n                key={id}\n                index={id}\n                author={video.user.name}\n                videoURL={video.video_files[0<\/span>].link}\n                authorLink={video.user.url}\n                lastVideoIndex={videos.length - 1<\/span>}\n                getVideos={getVideos}\n              \/>\n            ))}\n          <\/>\n        ) : (\n          <>\n            <h1>Nothing to show here<\/h1>\n          <\/>\n        )}\n      <\/div>\n\n      <BottomNav \/>\n    <\/main>\n  );\n}\n\nexport default<\/span> App;<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    The main modifications in this file are that we’ve updated the getVideos()<\/code> function to now really load video files via the Pexels API, and we’ve also added a new randomQuery()<\/code> function that generates random queries and allows us to pass the generated query to our Pexels API request. <\/p>\n\n\n\n
    Aside from that, we changed the VideoCard<\/code> component initialization to include information about loaded videos, such as the video author, video URL, and a link to the creator’s profile.<\/p>\n\n\n\n
    Finally, update src\/components\/VideoCard.js<\/code> and also replace this file’s content with the code below:<\/p>\n\n\n
    import<\/span> { useRef, useState, useEffect } from<\/span> \"react\"<\/span>;\n\nimport<\/span> useIsInViewport from<\/span> \"..\/useIsInViewport\"<\/span>;\n\nconst<\/span> VideoCard = ({\n  index,\n  author,\n  videoURL,\n  authorLink,\n  lastVideoIndex,\n  getVideos,\n}) => {\n  const<\/span> video = useRef();\n  const<\/span> isInViewport = useIsInViewport(video);\n  const<\/span> [loadNewVidsAt, setloadNewVidsAt] = useState(lastVideoIndex);\n\n  if<\/span> (isInViewport) {\n    setTimeout(()<\/span> =><\/span> {\n      video.current.play();\n    }, 1000<\/span>);\n\n    if<\/span> (loadNewVidsAt === Number<\/span>(video.current.id)) {\n      setloadNewVidsAt((prev<\/span>) =><\/span> prev + 2<\/span>);\n      getVideos(3<\/span>);\n    }\n  }\n\n  const<\/span> togglePlay = ()<\/span> =><\/span> {\n    let<\/span> currentVideo = video.current;\n    if<\/span> (currentVideo.paused) {\n      currentVideo.play();\n    } else<\/span> {\n      currentVideo.pause();\n    }\n  };\n\n  useEffect(()<\/span> =><\/span> {\n    if<\/span> (!isInViewport) {\n      video.current.pause();\n    }\n  }, [isInViewport]);\n\n  return<\/span> (\n    <div<\/span> className<\/span>=\"slider-children\"<\/span>><\/span>\n      <video<\/span>\n        muted<\/span>\n        className<\/span>=\"video\"<\/span>\n        ref<\/span>={video}<\/span>\n        onClick<\/span>={togglePlay}<\/span>\n        id<\/span>={index}<\/span>\n        autoPlay<\/span>={index<\/span> === 1}<\/span>\n      ><\/span>\n        <source<\/span> src<\/span>={videoURL}<\/span> type<\/span>=\"video\/mp4\"<\/span> \/><\/span>\n      <\/video<\/span>><\/span>\n      <div<\/span> className<\/span>=\"video-content\"<\/span> onClick<\/span>={togglePlay}<\/span>><\/span>\n        <p<\/span>><\/span>@{author}<\/p<\/span>><\/span>\n        <p<\/span>><\/span>\n          Video by <a<\/span> href<\/span>={authorLink}<\/span>><\/span>{author} <\/a<\/span>><\/span> on Pexel\n        <\/p<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> VideoCard;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The main modifications to this file are that we’ve added a video markup and set its source to the one loaded from the Pexels API. We also used our custom useIsInViewport<\/code> hook to check the video in the viewport and automatically play it. If the video isn’t playing, we use the useEffect hook to stop it from playing.<\/p>\n\n\n\n
    Furthermore, we created a new togglePlay()<\/code> function, similar to TikTok, that allows the user to pause or play a video anytime by simply clicking anywhere within the video frame.<\/p>\n\n\n\n
    And now our TikTok clone is complete! When we run our program now, we get the following results:<\/p>\n\n\n\n
    \"\"
    A cell phone screenplays short videos of people dancing, cityscapes, and wall decor. The videos change when the user scrolls up.<\/figcaption><\/figure>\n\n\n\n
    Voila!<\/h2>\n\n\n\n
    Throughout this article, we’ve explored how infinite scrolling works and how to implement the TikTok endless scrolling news feed by loading free videos from the Pexels API. For your convenience, the complete code for this tutorial is also hosted on GitHub<\/a> and in the CoderPad sandbox below:<\/p>\n\n\n\n
    \n
    \u2139\ufe0f Update line 17 in src\/App.tsx<\/code> with your Pexels API key before running the sandbox.<\/p>\n<\/blockquote>\n\n\n\n\t
Here, we imported the BottomNav<\/code> and VideoCard<\/code> components we created earlier. We also defined a videos<\/code> state using React’s useState<\/a> and set its initial value to an empty array. In addition, we defined a getVideos()<\/code> function, which receives a length, creates an array of that length and pushes the resulting values to our previously defined videos<\/code> state.<\/p>\n\n\n\n
The code above contains the markup, class names, and icon definitions for our TikTok-like bottom navigation bar. We use Font Awesome<\/a> icons for the icons, as seen in the previous code, but for it to work, we’ll also need to link its resource file. To do so, open the public\/index.html<\/code> file and paste the following into the head section:<\/p>\n\n\n