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
Смотрите видео Infinite Scroll in React | Full Tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Dave Gray 15 Июль 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 50,771 раз и оно понравилось 1.1 тысяч людям.