The Easiest Way to Infinite Scroll with React | Full Example скачать в хорошем качестве

The Easiest Way to Infinite Scroll with React | Full Example

In this video CJ shows a really easy way to implement infinite scroll with React. View the code here: https://github.com/w3cj/react-infinit... 00:00 Intro 00:43 Project Setup 01:11 Page Styles 01:21 Pure CSS Loading Spinner 02:33 Layout Styles 03:22 react-stately and useAsyncList 03:56 Why not tanstack query? 04:17 Install / setup react-stately 04:52 Pexels API Overview 05:16 fetch first page of images 05:46 Generate Types for the API Response 06:57 Creating items with the list 07:21 Image item styles 09:09 Image Container Aspect Ratio 10:08 Displaying the Images 11:08 Intersection Observer 11:33 react-intersection-observer 12:15 Watching for visibility changes 13:01 Loading the next page of results 15:06 Fixing duplicate load request 16:38 Wrapping list in useRef 18:13 Intersection Observer rootMargin 19:25 Thanks! react-stately useAsyncList | https://react-spectrum.adobe.com/reac... tanstack query - infinite queries | https://tanstack.com/query/v4/docs/fr... Intersection Observer | https://developer.mozilla.org/en-US/d... react-intersection-observer | https://www.npmjs.com/package/react-i... Pexels API | https://www.pexels.com/api/ ------------------------------------------------------------------------------ Hit us up on Socials! https://www.syntax.fm/links Brought to you by Sentry - Use code "tastytreats" to get 2 months free - https://sentry.io/syntax #react #typescript #webdevelopment