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
Watch video Infinite Scroll in React | Full Tutorial online without registration, duration hours minute second in high quality. This video was added by user Dave Gray 15 July 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 50,771 once and liked it 1.1 thousand people.