Infinite Scroll in React | Full Tutorial
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Infinite Scroll in React is a highly requested app feature that can be achieved in several ways. This React full tutorial provides two examples of creating an infinite scroll: 1) with React hooks and 2) with React Query.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: • React JS Full Course for Beginners | ...
📬 Course Updates ➜ https://courses.davegray.codes/
💻 Discord: / discord
🔗 Completed Source Code: https://github.com/gitdagray/react_in...
Infinite Scroll & Infinite Query in React | Full Tutorial
(00:00) Intro
(00:35) Welcome
(00:46) Starter code and dependencies
(02:00) Axios API setup
(04:28) usePosts custom hook
(12:10) Example 1 component
(15:37) Post component and forwardRef
(18:01) Applying useRef
(19:05) Checking functionality
(19:59) Intersection Observer and useCallback
(24:21) Testing Infinite Scroll & Query
(25:54) Example 2: React Query setup
(27:40) Example 2 component
(29:25) useInfiniteQuery
(33:09) Update Example 2 with useInfiniteQuery
(36:08) Testing Example 2 functionality
☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray
📚 Tutorial References:
🔗 React Query: useInfiniteQuery: https://react-query-v2.tanstack.com/r...
🔗 JSON Placeholder - Posts: https://jsonplaceholder.typicode.com/...
🔗 useAxios hook tutorial: • Use Axios with React Hooks for Async-...
🔗 useRef hook tutorial: • BUILD a React Timer with useRef | Rea...
🔗 useCallback hook tutorial: • useCallback STOPS this React MISTAKE ...
🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/de...
📚 General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(...)
React Jobs: https://www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: https://yesdavidgray.com
Reddit: / daveoneleven
Was this React Infinite Scroll tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#react #infinite #scroll
On this page of the site you can watch the video online Infinite Scroll in React | Full Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Dave Gray 15 July 2022, share the link with friends and acquaintances, this video has already been watched 50,771 times on youtube and it was liked by 1.1 thousand viewers. Enjoy your viewing!
