{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет друг ! В этой статье попробуем реализовать универсальный компонент (обёртку), для реализации загрузки новых данных при достижении конца списка пользователем \uD83E\uDDD0.","type":"unstyled","key":"6nbp8"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":21,"offset":62}],"inlineStyleRanges":[],"text":"За достижением оного обратимся за помощью к браузерному API - Intersection Observer.","type":"unstyled","key":"bagd4"},{"data":{"image":{"id":"6782ffca7fb0192ead2c1c32"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я - Intersection Observer !! :)","type":"atomic:image","key":"ecaer"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":3,"offset":24}],"inlineStyleRanges":[],"text":"Чего мы хотим добиться? тут \uD83E\uDD78.","type":"unstyled","key":"e86d9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"И так - поехали !\uD83D\uDEFC","type":"unstyled","key":"en3vj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Создадим моковые данные и фейковый запрос:","type":"header-three","key":"7mkhq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":47,"style":"ITALIC"},{"length":1,"offset":108,"style":"ITALIC"}],"text":"В родительском компоненте, для нашего будущего InfiniteScrollWrapper.tsx - тот самый универсальный компонент пишем:","type":"unstyled","key":"1t7na"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":36,"style":"ITALIC"}],"text":"// моковый массив\nconst MOCK_DATA = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);\n// колличество эллементв на странницу\nconst PAGE_SIZE = 10;\n\n// наш массив MOCK_DATA\nconst [data, setData] = useState(MOCK_DATA.slice(0, PAGE_SIZE));\n// состояние для \"странницы\"\nconst [page, setPage] = useState(1);\n// флажок надо еще или нет :)\nconst [hasMore, setHasMore] = useState(true);\n\n// фейковый запрос\nconst loadMore = async (): Promise => {\n return new Promise((resolve) => {\n setTimeout(() => {\n const nextPageData = MOCK_DATA.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);\n setData((prevData) => [...prevData, ...nextPageData]);\n setPage((prevPage) => prevPage + 1);\n if ((page + 1) * PAGE_SIZE >= MOCK_DATA.length) {\n setHasMore(false);\n }\n resolve(nextPageData);\n }, 1000);\n });\n};","type":"blockquote","key":"5f2mf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Создадим универсальный InfiniteScrollWrapper.tsx:","type":"header-three","key":"8nmbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":30,"style":"ITALIC"},{"length":5,"offset":71,"style":"ITALIC"}],"text":"При типизации функции запроса loadMore, предпочёл дженерик , вместо any, мне кажется так юридически правильнее будет \uD83D\uDE43.","type":"unstyled","key":"8bu04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {ReactNode, useEffect, useRef} from 'react';\n\ninterface IScrollCheckWrapper {\n children: ReactNode;\n // Типизированный дженерик для возврата данных\n loadMore: () => Promise;\n // Флаг, показывающий, есть ли еще данные для загрузки\n hasMore: boolean;\n}\n\nexport const InfiniteScrollWrapper = ({ children, loadMore, hasMore}: IScrollCheckWrapper) => {\n const observerRef = useRef(null);\n\n useEffect(() => {","type":"blockquote","key":"6mipq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"ITALIC"}],"text":" // Сохраняем текущее значение ref\n const currentRef = observerRef.current; ","type":"blockquote","key":"2d9vs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":9,"style":"ITALIC"}],"text":"// вот и IntersectionObserver подъехал :)\n const observer = new IntersectionObserver((entries) => {\n if (entries[0].isIntersecting && hasMore) {\n loadMore();\n }\n });\n\n if (currentRef) {\n observer.observe(currentRef);\n }\n\n return () => {\n if (currentRef) {\n observer.unobserve(currentRef);\n }\n };\n }, [loadMore, hasMore]);\n\n return (\n

\n {children}\n

\n );\n};","type":"blockquote","key":"b796s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Допилим родителя:","type":"header-three","key":"8s26t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"App.tsx:","type":"blockquote","key":"2drec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return (\n

\n \n loadMore={loadMore}\n hasMore={hasMore}\n >\n

{item}

\n \n

\n);","type":"blockquote","key":"eeupj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Чего-то не хватает \uD83E\uDD14?","type":"header-three","key":"cmgqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":10,"style":"ITALIC"},{"length":9,"offset":87,"style":"ITALIC"}],"text":"В функции loadMore, не просто так стоит задержка в 1 секунду. Таким образом эмитируем \"pending\" нашего запроса. Ну и как порядочные разрабы вешаем лоадер. ","type":"unstyled","key":"7tgeo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":35,"style":"ITALIC"}],"text":"В App.tsx пишем передаём доп пропс loader:","type":"unstyled","key":"apsle"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n loadMore={loadMore}\n hasMore={hasMore}\n loader={

Загрузка...

}\n>","type":"blockquote","key":"8m31i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":2,"style":"ITALIC"}],"text":"В InfiniteScrollWrapper.tsx принимаем его, с распростёртыми объятиями - разумеется \uD83E\uDD17.","type":"unstyled","key":"da1fa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"interface IScrollCheckWrapper {\n children: ReactNode;\n loadMore: () => Promise;\n hasMore: boolean;\n // Опциональный лоадер\n loader?: ReactNode;\n}","type":"blockquote","key":"djblf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":115,"style":"ITALIC"}],"text":"Ну и привяжем его отрисовку ко флагу, который сигнализирует о том, что надо ещё элементов, на странницу, подкинуть (hasMore).","type":"unstyled","key":"7robr"},{"data":{"image":{"id":"67830b0094b62d28c5f4f046"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"hasMore === true;","type":"atomic:image","key":"8atu1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{hasMore && loader &&

{loader}

}","type":"blockquote","key":"1qoh4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Итоговый код:","type":"header-three","key":"spjb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//--------App.tsx:","type":"blockquote","key":"51a57"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":180,"style":"ITALIC"}],"text":"import {useState} from 'react';\n\nimport {InfiniteScrollWrapper} from './components/InfiniteScrollWrapper.tsx';\n\nimport './App.css';\n\nexport const App = () => {\n const MOCK_DATA = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);\n const PAGE_SIZE = 10;\n\n const [data, setData] = useState(MOCK_DATA.slice(0, PAGE_SIZE));\n const [page, setPage] = useState(1);\n const [hasMore, setHasMore] = useState(true);\n\n const loadMore = async (): Promise => {\n return new Promise((resolve) => {\n setTimeout(() => {\n const nextPageData = MOCK_DATA.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);\n setData((prevData) => [...prevData, ...nextPageData]);\n setPage((prevPage) => prevPage + 1);\n if ((page + 1) * PAGE_SIZE >= MOCK_DATA.length) {\n setHasMore(false);\n }\n resolve(nextPageData);\n }, 1000);\n });\n };\n\n return (\n

\n \n loadMore={loadMore}\n hasMore={hasMore}\n loader={

Загрузка...

}\n >\n

{item}

\n \n {!hasMore &&

Все эллементы загружены!

}\n

\n );\n};","type":"blockquote","key":"3qaa7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":"//--------InfiniteScrollWrapper.tsx:","type":"blockquote","key":"bu0dc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {ReactNode, useEffect, useRef} from 'react';\n\ninterface IScrollCheckWrapper {\n children: ReactNode;\n loadMore: () => Promise;\n hasMore: boolean;\n loader?: ReactNode;\n}\n\nexport const InfiniteScrollWrapper = ({\n children,\n loadMore,\n hasMore,\n loader,\n}: IScrollCheckWrapper) => {\n const observerRef = useRef(null);\n\n useEffect(() => {\n const currentRef = observerRef.current; // Сохраняем текущее значение ref\n const observer = new IntersectionObserver((entries) => {\n if (entries[0].isIntersecting && hasMore) {\n loadMore();\n }\n });\n\n if (currentRef) {\n observer.observe(currentRef);\n }\n\n return () => {\n if (currentRef) {\n observer.unobserve(currentRef);\n }\n };\n }, [loadMore, hasMore]);\n\n return (\n

\n {children}\n {hasMore && loader &&

{loader}

}\n

\n );\n};","type":"blockquote","key":"7n62n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":29,"style":"ITALIC"}],"text":"Теперь мы можем использовать InfiniteScrollWrapper в любом месте нашего приложения! Да и вообще мы молодцы \uD83E\uDDF8!","type":"unstyled","key":"c3jnn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спасибо за внимание! До Новых Встреч!\uD83E\uDD17\uD83E\uDD17\uD83E\uDD17","type":"unstyled","key":"7pobr"},{"data":{"image":{"id":"678309b87fb0192ead331d65"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"40use"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"W8C3PUNjbzDFXpBkajyV"}],"entityMap":{"0":{"data":{"url":"https://doka.guide/js/intersection-observer/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"badSeoLink":"true","url":"https://dzen.ru/video/watch/67830bd2801f5f28ad04407d"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}