Coding an Infinite Scroller with React JS Hooks

== [ Description ] == In this coding tutorial, we go over how to build an infinite scroller with React hooks. Learning how to build infinite scrolling is important because it is a popular coding interview question for frontend engineers and it is also used by a lot of tech companies like Facebook and Twitter. We will start off this tutorial by setting up Next.js with Tailwind CSS. Next, we will query an API with axios and load the data into a React useState hook. Finally, we will implement the infinite scroll component to load data after the user scrolls to the bottom of the page.

== [ Projects ] == Orbital Video File Browser 👉 https://www.orbital.so

== [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng YouTube ▶ https://youtube.com/SuboptimalEng Website ▶ https://suboptimaleng.com

== [ Resources] == GitHub Code: https://github.com/SuboptimalEng/CodingTutorials Next.js Setup Guide: https://nextjs.org/docs/getting-started Pokemon API: https://pokeapi.co/

== [ Timestamps ] == 00:00 What is Infinite Scroll? 00:49 Next.js Setup Guide 02:19 Request API Data with Axios 04:05 Store Data in useState Hook 06:46 Update UI with Tailwind CSS 07:55 Refactor Code with useEffect 09:05 Add Window Event Listener 10:08 Determine Page Scroll Offset 13:22 Load API Data on Scroll 15:14 Add Infinite Scroll

== [ Tags ] == #suboptimal #reactjs #reacthooks