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
Смотрите видео How to Code an Infinite Scroller with React Hooks онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Suboptimal Engineer 09 Октябрь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 27,010 раз и оно понравилось 552 людям.