How to Code an Infinite Scroller with React Hooks
In this coding tutorial, we go over how to build an infinite scroller with React JS. 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 add a window listener that continuously loads data when the user scrolls to the bottom of the page.
📖 Code - https://github.com/SuboptimalEng/codi...
🐦 Twitter - / suboptimaleng
💻 GitHub - https://github.com/SuboptimalEng
🌎 Website - https://suboptimaleng.com
== [ Resources ] ==
Pokemon API: https://pokeapi.co
Next.js Setup Guide: https://nextjs.org/docs/getting-started
== [ 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 #javascript #reactjs
