Infinite Scroll in React | Full Tutorial

Web Dev Roadmap for Beginners (Free!): 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 ➜ patreon.com/davegray

⭐ Become a full-stack web dev with Zero To Mastery Courses:
Advanced React: bit.ly/AdvReactDev
Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
Master FAANG Coding Interviews: bit.ly/FAANGInterview

🚩 Subscribe ➜ bit.ly/3nGHmNn

🚀 React JS for Beginners full course - 9 hours:    • React JS Full Course for Beginners | Compl...  

📬 Course Updates ➜ courses.davegray.codes/

💻 Discord: discord.gg/neKghyefqh

🔗 Completed Source Code: github.com/gitdagray/react_infinite_scroll

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: www.buymeacoffee.com/davegray

📚 Tutorial References:
🔗 React Query: useInfiniteQuery: react-query-v2.tanstack.com/reference/useInfiniteQ…
🔗 JSON Placeholder - Posts: jsonplaceholder.typicode.com/posts
🔗 useAxios hook tutorial:    • Use Axios with React Hooks for Async-Await...  
🔗 useRef hook tutorial:    • BUILD a React Timer with useRef | React Ho...  
🔗 useCallback hook tutorial:    • useCallback STOPS this React MISTAKE | use...  
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/items?itemName=dsznaj…

🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/detail/react-developer-…

📚 General React References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: www.ziprecruiter.com/candidate/search?search=react…

✅ Follow Me:
Github: github.com/gitdagray
Twitter: twitter.com/yesdavidgray
LinkedIn: www.linkedin.com/in/davidagray/
Blog: yesdavidgray.com/
Reddit: www.reddit.com/user/DaveOnEleven

Was this React Infinite Scroll tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #infinite #scroll