{"id":74866,"date":"2024-08-27T10:20:38","date_gmt":"2024-08-27T06:50:38","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/infinite-scroll-component-using-useswrinfinite-ni2\/"},"modified":"2024-08-27T10:20:38","modified_gmt":"2024-08-27T06:50:38","slug":"infinite-scroll-component-using-useswrinfinite-ni2","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/infinite-scroll-component-using-useswrinfinite-ni2\/","title":{"rendered":"\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useSWRInfinite"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a\u060c \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0648\u0644\u0641\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u0645. \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0641\u0647\u0648\u0645 \u062a\u0627\u0632\u0647 \u06a9\u0627\u0631 \u0647\u0633\u062a\u06cc\u062f \u06cc\u0627 \u0641\u0642\u0637 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u062c\u062f\u06cc\u062f \u0646\u0638\u0631 \u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u0627 \u0622\u0646 \u0631\u0627 \u0645\u0631\u062d\u0644\u0647 \u0628\u0647 \u0645\u0631\u062d\u0644\u0647 \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0645\u062d\u0635\u0648\u0644 \u0645\u0646\u060c TubeMemo\u060c \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0628\u0648\u062f\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 \u062f\u0631 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u200c\u0647\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc YouTube \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0646\u0646\u062f \u0648 \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0631 \u06cc\u06a9 \u0644\u062d\u0638\u0647 \u062a\u062d\u062a \u062a\u0623\u062b\u06cc\u0631 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u063a\u0631\u0642 \u0634\u0648\u0646\u062f.<\/p>\n<p>          \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0644\u0648\u0644\u0647 &#8211; \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0628\u0631\u062f\u0627\u0631\u06cc \u0628\u06cc \u062f\u0631\u062f\u0633\u0631 YouTube<\/p>\n<p>           \u0628\u0627 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u0631\u0648\u0646\u0648\u0634\u062a \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u060c \u0644\u062d\u0638\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0648\u06cc\u062f\u06cc\u0648 \u0631\u0627 \u0636\u0628\u0637\u060c \u062d\u0627\u0634\u06cc\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0648 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0628\u0631\u0627\u06cc \u062f\u0627\u0646\u0634 \u0622\u0645\u0648\u0632\u0627\u0646\u060c \u0645\u062d\u0642\u0642\u0627\u0646 \u0648 \u062a\u0648\u0644\u06cc\u062f\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0645\u062d\u062a\u0648\u0627<\/p>\n<p>        tubememo.com<\/p>\n<p>  \u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc: \u0622\u0646\u0686\u0647 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a\u0646 \u0647\u0633\u062a\u06cc\u0645<\/p>\n<p>\u0645\u0627 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<br \/>\n\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f useSWRInfinite \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 useInView \u0628\u0631\u0627\u06cc \u062a\u0634\u062e\u06cc\u0635 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u0644\u06cc\u0633\u062a \u0645\u06cc \u0631\u0633\u062f.<\/p>\n<p>  \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0624\u0644\u0641\u0647 \u0645\u0624\u0644\u0641\u0647 \u0645\u0627 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f:<\/p>\n<p>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u06cc\u0627\u0644\u062a: \u0645\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u062f\u0631 \u062d\u0627\u0644\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u0647\u0633\u062a\u06cc\u0645\u060c \u06a9\u062f\u0627\u0645 \u0645\u0648\u0627\u0631\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0627\u0646\u062f \u0648 \u0622\u06cc\u0627 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a.<br \/>\n\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f useSWRInfinite \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u0627\u0632 \u0633\u0631\u0648\u0631.<br \/>\n\u0645\u0648\u0627\u0631\u062f \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647: \u067e\u0633\u062a \u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0634\u0628\u06a9\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f \u0648 \u067e\u0633\u062a \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u0627 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u0634\u0648\u0646\u062f.<br \/>\n\u062a\u0634\u062e\u06cc\u0635 \u0627\u0633\u06a9\u0631\u0648\u0644: useInView \u0628\u0647 \u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0634\u062e\u06cc\u0635 \u062f\u0647\u06cc\u0645 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u0644\u06cc\u0633\u062a \u0631\u0641\u062a\u0647 \u0627\u0633\u062a.<\/p>\n<p>  \u0628\u062e\u0634 \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u062f \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u062e\u0634 \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u062f \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0641\u0647\u0645\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0647\u0645\u0647 \u0628\u0627 \u0647\u0645 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062d\u0627\u0644\u062a \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0647\u0648\u06a9:<\/p>\n<p>  const { ref, inView } = useInView();<br \/>\n  const { userId } = useAuth();<br \/>\n  const [finished, setFinished] = useState(false);<\/p>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 useInView \u0628\u0631\u0627\u06cc \u062f\u0627\u0646\u0633\u062a\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062e\u0627\u0635 (\u06cc\u06a9 \u0645\u062d\u0644 \u0642\u0631\u0627\u0631\u06af\u06cc\u0631\u06cc div \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0644\u06cc\u0633\u062a) \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a. \u0631\u0627 finished \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0645\u0627 \u0647\u0645\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n<p>\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0628\u0627 useSWRInfinite:<\/p>\n<p>  const getKey = (pageIndex: number, previousPageData: any) =&gt; {<br \/>\n      if (previousPageData &amp;&amp; !previousPageData.length) {<br \/>\n          setFinished(true);<br \/>\n          return null;<br \/>\n      }<br \/>\n      const offset = pageIndex === 0 ? null : previousPageData?.[previousPageData.length &#8211; 1]?.id;<br \/>\n      return `\/api\/posts?offset=${offset}&amp;limit=10`;<br \/>\n  };<\/p>\n<p>\u0631\u0627 getKey \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0647\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a API \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0631\u0627 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u062f\u0627\u062f\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c previousPageData \u062e\u0627\u0644\u06cc \u0627\u0633\u062a)\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0631\u0627 \u0628\u0627 \u0628\u0627\u0632\u06af\u0634\u062a \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc \u06a9\u0646\u062f null.<\/p>\n<p>\u0631\u0627 fetcher \u062a\u0627\u0628\u0639 \u0645\u0633\u0626\u0648\u0644 \u0628\u0631\u0642\u0631\u0627\u0631\u06cc \u062a\u0645\u0627\u0633 API \u0627\u0633\u062a:<\/p>\n<p>  interface Post {<br \/>\n      id: string;<br \/>\n      content: string;<br \/>\n  }<\/p>\n<p>  const fetcher = async (url: string): Promise&lt;Post[]&gt; =&gt; {<br \/>\n      const response = await fetch(url);<br \/>\n      return response.json();<br \/>\n  };<\/p>\n<p>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644:<\/p>\n<p>  useEffect(() =&gt; {<br \/>\n    if (inView &amp;&amp; !isLoading &amp;&amp; !isValidating &amp;&amp; !finished) {<br \/>\n      setSize((prevSize) =&gt; prevSize + 1);<br \/>\n    }<br \/>\n  }, [inView, isLoading, isValidating, setSize]);<\/p>\n<p>\u0627\u06cc\u0646 useEffect \u0642\u0644\u0627\u0628 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u067e\u0627\u06cc\u06cc\u0646 \u0644\u06cc\u0633\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f (inView). \u0627\u06af\u0631 \u0627\u06cc\u0646\u0637\u0648\u0631 \u0627\u0633\u062a\u060c \u0648 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06cc\u0627 \u062a\u0623\u06cc\u06cc\u062f \u0646\u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0648 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0647\u0645\u0647 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u062a\u0645\u0627\u0645 \u0646\u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u062a\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f.<\/p>\n<p>  \u0627\u0631\u0627\u0626\u0647 \u0645\u062d\u062a\u0648\u0627<\/p>\n<p>\u067e\u0633\u062a\u200c\u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0634\u0628\u06a9\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u0628\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u060c \u0628\u0647 \u0644\u06cc\u0633\u062a \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0646\u0634\u0627\u0646\u06af\u0631 \u0648\u0636\u0639\u06cc\u062a \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u062d\u06cc\u0646 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u060c \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u0646\u06af\u0647\u062f\u0627\u0631 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<p>return (<br \/>\n    &lt;div className=&#8221;relative pt-4 w-full h-full space-y-2&#8243;&gt;<br \/>\n        &lt;h2 className=&#8221;text-xl font-semibold&#8221;&gt;Your posts&lt;\/h2&gt;<br \/>\n        &lt;div className=&#8221;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4&#8243;&gt;<br \/>\n            {items?.map((item: any) =&gt; (<br \/>\n                &lt;BlogPost key={item?.id} data={item} \/&gt;<br \/>\n            ))}<br \/>\n            {isLoading &amp;&amp; isValidating ? (<br \/>\n               &lt;div ref={ref}&gt; Loading&#8230; &lt;\/div&gt;<br \/>\n            ) : null}<br \/>\n        &lt;\/div&gt;<br \/>\n    &lt;\/div&gt;<br \/>\n);<\/p>\n<p>  \u0647\u0645\u0647 \u0631\u0627 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u06af\u0630\u0627\u0634\u062a\u0646<\/p>\n<p>import React, { useState, useEffect } from &#8216;react&#8217;;<br \/>\nimport useSWRInfinite from &#8216;swr\/infinite&#8217;;<br \/>\nimport { useInView } from &#8216;@react-intersection-observer&#8217;;<\/p>\n<p>const fetcher = async (url: string) =&gt; {<br \/>\n  const response = await fetch(url);<br \/>\n  if (!response.ok) {<br \/>\n    throw new Error(&#8216;Network error&#8217;);<br \/>\n  }<br \/>\n  return response.json();<br \/>\n};<\/p>\n<p>const InfinityScrollList: React.FC = () =&gt; {<br \/>\n  const { ref, inView } = useInView();<br \/>\n  const [finished, setFinished] = useState(false);<\/p>\n<p>  const getKey = (pageIndex: number, previousPageData: any) =&gt; {<br \/>\n    if (previousPageData &amp;&amp; !previousPageData.length) {<br \/>\n      setFinished(true);<br \/>\n      return null;<br \/>\n    }<br \/>\n    const offset = pageIndex === 0 ? null : previousPageData?.[previousPageData.length &#8211; 1]?.id;<br \/>\n    return `\/api\/posts?offset=${offset}&amp;limit=8`;<br \/>\n  };<\/p>\n<p>  const { data, error, size, setSize, isValidating } = useSWRInfinite(getKey, fetcher);<\/p>\n<p>  useEffect(() =&gt; {<br \/>\n    if (inView &amp;&amp; !isValidating &amp;&amp; !finished) {<br \/>\n      setSize((prevSize) =&gt; prevSize + 1);<br \/>\n    }<br \/>\n  }, [inView, isValidating, finished, setSize]);<\/p>\n<p>  const posts = data?.flat();<\/p>\n<p>  return (<br \/>\n    &lt;div className=&#8221;relative pt-4 w-full h-full space-y-2&#8243;&gt;<br \/>\n      &lt;h2 className=&#8221;text-xl font-semibold&#8221;&gt;Your posts&lt;\/h2&gt;<br \/>\n      &lt;div className=&#8221;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4&#8243;&gt;<br \/>\n        {posts?.map?.((post: any) =&gt; (<br \/>\n          &lt;div key={post.id} className=&#8221;bg-gray-200 p-4 rounded-lg&#8221;&gt;<br \/>\n            &lt;h3 className=&#8221;text-lg font-bold&#8221;&gt;{post.title}&lt;\/h3&gt;<br \/>\n            &lt;p&gt;{post.content}&lt;\/p&gt;<br \/>\n          &lt;\/div&gt;<br \/>\n        ))}<br \/>\n        {(isValidating &amp;&amp; size &gt; 1) &amp;&amp; (<br \/>\n           &lt;div ref={ref}&gt; Loading&#8230; &lt;\/div&gt;<br \/>\n        )}<br \/>\n      &lt;\/div&gt;<br \/>\n    &lt;\/div&gt;<br \/>\n  );<br \/>\n};<\/p>\n<p>export default InfinityScrollList;<\/p>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n<p>\u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u067e\u0631 \u0645\u062d\u062a\u0648\u0627 \u0628\u0647 \u0645\u06cc\u0632\u0627\u0646 \u0632\u06cc\u0627\u062f\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0628\u0627\u06cc\u062f \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0622\u0646 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0628\u0647 \u062e\u0648\u0628\u06cc \u0645\u062c\u0647\u0632 \u0628\u0627\u0634\u06cc\u062f. <\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a\u060c \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0648\u0644\u0641\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u0645. \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0641\u0647\u0648\u0645 \u062a\u0627\u0632\u0647 \u06a9\u0627\u0631 \u0647\u0633\u062a\u06cc\u062f \u06cc\u0627 \u0641\u0642\u0637 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u062c\u062f\u06cc\u062f \u0646\u0638\u0631 \u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u0627 \u0622\u0646 \u0631\u0627 \u0645\u0631\u062d\u0644\u0647 \u0628\u0647 \u0645\u0631\u062d\u0644\u0647 \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0645\u062d\u0635\u0648\u0644 \u0645\u0646\u060c TubeMemo\u060c \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0628\u0648\u062f\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 \u062f\u0631 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u200c\u0647\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc YouTube \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0646\u0646\u062f \u0648 \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0631 \u06cc\u06a9 \u0644\u062d\u0638\u0647 \u062a\u062d\u062a \u062a\u0623\u062b\u06cc\u0631 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u063a\u0631\u0642 \u0634\u0648\u0646\u062f.<\/p>\n<div class=\"crayons-card c-embed text-styles text-styles--secondary\">\n<div class=\"c-embed__cover\">\n<p>          <\/p><\/div>\n<div class=\"c-embed__body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/infinite-scroll-component-using-useswrinfinite-ni2\/#%DB%8C%D8%A7%D8%AF%D8%AF%D8%A7%D8%B4%D8%AA_%D9%84%D9%88%D9%84%D9%87_%E2%80%93_%DB%8C%D8%A7%D8%AF%D8%AF%D8%A7%D8%B4%D8%AA_%D8%A8%D8%B1%D8%AF%D8%A7%D8%B1%DB%8C_%D8%A8%DB%8C_%D8%AF%D8%B1%D8%AF%D8%B3%D8%B1_YouTube\" >\u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0644\u0648\u0644\u0647 &#8211; \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0628\u0631\u062f\u0627\u0631\u06cc \u0628\u06cc \u062f\u0631\u062f\u0633\u0631 YouTube<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/infinite-scroll-component-using-useswrinfinite-ni2\/#%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C_%D8%A7%D8%AC%D9%85%D8%A7%D9%84%DB%8C_%D8%A2%D9%86%DA%86%D9%87_%D9%85%D8%A7_%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D8%B3%D8%A7%D8%AE%D8%AA%D9%86_%D9%87%D8%B3%D8%AA%DB%8C%D9%85\" >\u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc: \u0622\u0646\u0686\u0647 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a\u0646 \u0647\u0633\u062a\u06cc\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/infinite-scroll-component-using-useswrinfinite-ni2\/#%D8%B1%D8%A7%D9%87%E2%80%8C%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%85%D8%A7_%D8%A7%DB%8C%D9%86_%D9%85%D9%88%D8%A7%D8%B1%D8%AF_%D8%B1%D8%A7_%D8%A7%D9%86%D8%AC%D8%A7%D9%85_%D9%85%DB%8C%E2%80%8C%D8%AF%D9%87%D8%AF\" >\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0624\u0644\u0641\u0647 \u0645\u0624\u0644\u0641\u0647 \u0645\u0627 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/infinite-scroll-component-using-useswrinfinite-ni2\/#%D8%A8%D8%AE%D8%B4_%D9%87%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C_%DA%A9%D8%AF_%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_%D8%AF%D8%A7%D8%AF%D9%87_%D8%B4%D8%AF%D9%87_%D8%A7%D8%B3%D8%AA\" >\u0628\u062e\u0634 \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u062f \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/infinite-scroll-component-using-useswrinfinite-ni2\/#%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D9%85%D8%AD%D8%AA%D9%88%D8%A7\" >\u0627\u0631\u0627\u0626\u0647 \u0645\u062d\u062a\u0648\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/infinite-scroll-component-using-useswrinfinite-ni2\/#%D9%87%D9%85%D9%87_%D8%B1%D8%A7_%DA%A9%D9%86%D8%A7%D8%B1_%D9%87%D9%85_%DA%AF%D8%B0%D8%A7%D8%B4%D8%AA%D9%86\" >\u0647\u0645\u0647 \u0631\u0627 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u06af\u0630\u0627\u0634\u062a\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/infinite-scroll-component-using-useswrinfinite-ni2\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"fs-xl lh-tight\"><span class=\"ez-toc-section\" id=\"%DB%8C%D8%A7%D8%AF%D8%AF%D8%A7%D8%B4%D8%AA_%D9%84%D9%88%D9%84%D9%87_%E2%80%93_%DB%8C%D8%A7%D8%AF%D8%AF%D8%A7%D8%B4%D8%AA_%D8%A8%D8%B1%D8%AF%D8%A7%D8%B1%DB%8C_%D8%A8%DB%8C_%D8%AF%D8%B1%D8%AF%D8%B3%D8%B1_YouTube\"><\/span>\n<p>          \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0644\u0648\u0644\u0647 &#8211; \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0628\u0631\u062f\u0627\u0631\u06cc \u0628\u06cc \u062f\u0631\u062f\u0633\u0631 YouTube<\/p>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p class=\"truncate-at-3\">\n<p>           \u0628\u0627 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u0631\u0648\u0646\u0648\u0634\u062a \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u060c \u0644\u062d\u0638\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0648\u06cc\u062f\u06cc\u0648 \u0631\u0627 \u0636\u0628\u0637\u060c \u062d\u0627\u0634\u06cc\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0648 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0628\u0631\u0627\u06cc \u062f\u0627\u0646\u0634 \u0622\u0645\u0648\u0632\u0627\u0646\u060c \u0645\u062d\u0642\u0642\u0627\u0646 \u0648 \u062a\u0648\u0644\u06cc\u062f\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0645\u062d\u062a\u0648\u0627\n        <\/p>\n<div class=\"color-secondary fs-s flex items-center\">\n          <img loading=\"lazy\" decoding=\"async\" alt=\"\u0641\u0627\u0648\u06cc\u06a9\u0648\u0646\" class=\"c-embed__favicon m-0 mr-2 radius-0\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--m-fSmAPl--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/www.tubememo.com\/favicon.ico\" width=\"256\" height=\"256\" title=\"\"><br \/>\n        tubememo.com\n      <\/div>\n<\/p><\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C_%D8%A7%D8%AC%D9%85%D8%A7%D9%84%DB%8C_%D8%A2%D9%86%DA%86%D9%87_%D9%85%D8%A7_%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D8%B3%D8%A7%D8%AE%D8%AA%D9%86_%D9%87%D8%B3%D8%AA%DB%8C%D9%85\"><\/span>\n<p>  \u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc: \u0622\u0646\u0686\u0647 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a\u0646 \u0647\u0633\u062a\u06cc\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f. <br \/>\n\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>useSWRInfinite<\/code> \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 <code>useInView<\/code> \u0628\u0631\u0627\u06cc \u062a\u0634\u062e\u06cc\u0635 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u0644\u06cc\u0633\u062a \u0645\u06cc \u0631\u0633\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87%E2%80%8C%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%85%D8%A7_%D8%A7%DB%8C%D9%86_%D9%85%D9%88%D8%A7%D8%B1%D8%AF_%D8%B1%D8%A7_%D8%A7%D9%86%D8%AC%D8%A7%D9%85_%D9%85%DB%8C%E2%80%8C%D8%AF%D9%87%D8%AF\"><\/span>\n<p>  \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0624\u0644\u0641\u0647 \u0645\u0624\u0644\u0641\u0647 \u0645\u0627 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\n<p>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u06cc\u0627\u0644\u062a: \u0645\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u062f\u0631 \u062d\u0627\u0644\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u0647\u0633\u062a\u06cc\u0645\u060c \u06a9\u062f\u0627\u0645 \u0645\u0648\u0627\u0631\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0627\u0646\u062f \u0648 \u0622\u06cc\u0627 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p>\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>useSWRInfinite<\/code> \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u0627\u0632 \u0633\u0631\u0648\u0631.<\/p>\n<\/li>\n<li>\n<p>\u0645\u0648\u0627\u0631\u062f \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647: \u067e\u0633\u062a \u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0634\u0628\u06a9\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f \u0648 \u067e\u0633\u062a \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u0627 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p>\u062a\u0634\u062e\u06cc\u0635 \u0627\u0633\u06a9\u0631\u0648\u0644: <code>useInView<\/code> \u0628\u0647 \u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0634\u062e\u06cc\u0635 \u062f\u0647\u06cc\u0645 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u0644\u06cc\u0633\u062a \u0631\u0641\u062a\u0647 \u0627\u0633\u062a.<\/p>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%D8%AE%D8%B4_%D9%87%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C_%DA%A9%D8%AF_%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_%D8%AF%D8%A7%D8%AF%D9%87_%D8%B4%D8%AF%D9%87_%D8%A7%D8%B3%D8%AA\"><\/span>\n<p>  \u0628\u062e\u0634 \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u062f \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u062e\u0634 \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u062f \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0641\u0647\u0645\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0647\u0645\u0647 \u0628\u0627 \u0647\u0645 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<ul>\n<li>\n<strong>\u062d\u0627\u0644\u062a \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0647\u0648\u06a9:<\/strong>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ref<\/span><span class=\"p\">,<\/span> <span class=\"nx\">inView<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useInView<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useAuth<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">finished<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setFinished<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>useInView<\/code> \u0628\u0631\u0627\u06cc \u062f\u0627\u0646\u0633\u062a\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062e\u0627\u0635 (\u06cc\u06a9 \u0645\u062d\u0644 \u0642\u0631\u0627\u0631\u06af\u06cc\u0631\u06cc div \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0644\u06cc\u0633\u062a) \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a. \u0631\u0627 <code>finished<\/code> \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0645\u0627 \u0647\u0645\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n<ul>\n<li>\n<strong>\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0628\u0627 <code>useSWRInfinite<\/code>:<\/strong>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">getKey<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">pageIndex<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span> <span class=\"nx\">previousPageData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">previousPageData<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">previousPageData<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nf\">setFinished<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n          <span class=\"k\">return<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">offset<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">pageIndex<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span> <span class=\"p\">?<\/span> <span class=\"kc\">null<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">previousPageData<\/span><span class=\"p\">?.[<\/span><span class=\"nx\">previousPageData<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">]?.<\/span><span class=\"nx\">id<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">return<\/span> <span class=\"s2\">`\/api\/posts?offset=<\/span><span class=\"p\">${<\/span><span class=\"nx\">offset<\/span><span class=\"p\">}<\/span><span class=\"s2\">&amp;limit=10`<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">};<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u0631\u0627 <code>getKey<\/code> \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0647\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a API \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0631\u0627 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u062f\u0627\u062f\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c <code>previousPageData<\/code> \u062e\u0627\u0644\u06cc \u0627\u0633\u062a)\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0631\u0627 \u0628\u0627 \u0628\u0627\u0632\u06af\u0634\u062a \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc \u06a9\u0646\u062f <code>null<\/code>.<\/p>\n<p>\u0631\u0627 <code>fetcher<\/code> \u062a\u0627\u0628\u0639 \u0645\u0633\u0626\u0648\u0644 \u0628\u0631\u0642\u0631\u0627\u0631\u06cc \u062a\u0645\u0627\u0633 API \u0627\u0633\u062a:\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"kr\">interface<\/span> <span class=\"nx\">Post<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n      <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">fetcher<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">url<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Post<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">url<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">};<\/span>\n\n<\/code><\/pre>\n<\/div>\n<ul>\n<li>\n<strong>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644:<\/strong>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">inView<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">isLoading<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">isValidating<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">finished<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setSize<\/span><span class=\"p\">((<\/span><span class=\"nx\">prevSize<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">prevSize<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">inView<\/span><span class=\"p\">,<\/span> <span class=\"nx\">isLoading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">isValidating<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setSize<\/span><span class=\"p\">]);<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u0627\u06cc\u0646 <code>useEffect<\/code> \u0642\u0644\u0627\u0628 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u067e\u0627\u06cc\u06cc\u0646 \u0644\u06cc\u0633\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f (<code>inView<\/code>). \u0627\u06af\u0631 \u0627\u06cc\u0646\u0637\u0648\u0631 \u0627\u0633\u062a\u060c \u0648 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06cc\u0627 \u062a\u0623\u06cc\u06cc\u062f \u0646\u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0648 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0647\u0645\u0647 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u062a\u0645\u0627\u0645 \u0646\u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u062a\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D9%85%D8%AD%D8%AA%D9%88%D8%A7\"><\/span>\n<p>  <strong>\u0627\u0631\u0627\u0626\u0647 \u0645\u062d\u062a\u0648\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u067e\u0633\u062a\u200c\u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0634\u0628\u06a9\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u0628\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u060c \u0628\u0647 \u0644\u06cc\u0633\u062a \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0646\u0634\u0627\u0646\u06af\u0631 \u0648\u0636\u0639\u06cc\u062a \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u062d\u06cc\u0646 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u060c \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u0646\u06af\u0647\u062f\u0627\u0631 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f:\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">relative pt-4 w-full h-full space-y-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-xl font-semibold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Your<\/span> <span class=\"nx\">posts<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">items<\/span><span class=\"p\">?.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"na\">item<\/span><span class=\"p\">:<\/span> <span class=\"nx\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">BlogPost<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span> <span class=\"nx\">data<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"p\">))}<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">isLoading<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">isValidating<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n               <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">ref<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span> <span class=\"nx\">Loading<\/span><span class=\"p\">...<\/span> <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%87%D9%85%D9%87_%D8%B1%D8%A7_%DA%A9%D9%86%D8%A7%D8%B1_%D9%87%D9%85_%DA%AF%D8%B0%D8%A7%D8%B4%D8%AA%D9%86\"><\/span>\n<p>  <strong>\u0647\u0645\u0647 \u0631\u0627 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u06af\u0630\u0627\u0634\u062a\u0646<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">useSWRInfinite<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">swr\/infinite<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useInView<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@react-intersection-observer<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">fetcher<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">url<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">url<\/span><span class=\"p\">);<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Network error<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">InfinityScrollList<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FC<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ref<\/span><span class=\"p\">,<\/span> <span class=\"nx\">inView<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useInView<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">finished<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setFinished<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">getKey<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">pageIndex<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span> <span class=\"na\">previousPageData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">previousPageData<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">previousPageData<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setFinished<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">return<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">offset<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">pageIndex<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span> <span class=\"p\">?<\/span> <span class=\"kc\">null<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">previousPageData<\/span><span class=\"p\">?.[<\/span><span class=\"nx\">previousPageData<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">]?.<\/span><span class=\"nx\">id<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">return<\/span> <span class=\"s2\">`\/api\/posts?offset=<\/span><span class=\"p\">${<\/span><span class=\"nx\">offset<\/span><span class=\"p\">}<\/span><span class=\"s2\">&amp;limit=8`<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">size<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setSize<\/span><span class=\"p\">,<\/span> <span class=\"nx\">isValidating<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useSWRInfinite<\/span><span class=\"p\">(<\/span><span class=\"nx\">getKey<\/span><span class=\"p\">,<\/span> <span class=\"nx\">fetcher<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">inView<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">isValidating<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">finished<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setSize<\/span><span class=\"p\">((<\/span><span class=\"nx\">prevSize<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">prevSize<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">inView<\/span><span class=\"p\">,<\/span> <span class=\"nx\">isValidating<\/span><span class=\"p\">,<\/span> <span class=\"nx\">finished<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setSize<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">posts<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">data<\/span><span class=\"p\">?.<\/span><span class=\"nf\">flat<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"relative pt-4 w-full h-full space-y-2\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h2<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-xl font-semibold\"<\/span><span class=\"p\">&gt;<\/span>Your posts<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"si\">{<\/span><span class=\"nx\">posts<\/span><span class=\"p\">?.<\/span><span class=\"nx\">map<\/span><span class=\"p\">?.((<\/span><span class=\"nx\">post<\/span><span class=\"p\">:<\/span> <span class=\"nx\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"bg-gray-200 p-4 rounded-lg\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">h3<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-lg font-bold\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">h3<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">content<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\n        <span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">isValidating<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">size<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n           <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">ref<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">ref<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span> Loading... <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">InfinityScrollList<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u067e\u0631 \u0645\u062d\u062a\u0648\u0627 \u0628\u0647 \u0645\u06cc\u0632\u0627\u0646 \u0632\u06cc\u0627\u062f\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0628\u0627\u06cc\u062f \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0622\u0646 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0628\u0647 \u062e\u0648\u0628\u06cc \u0645\u062c\u0647\u0632 \u0628\u0627\u0634\u06cc\u062f. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a\u060c \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0648\u0644\u0641\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u0645. \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0641\u0647\u0648\u0645 \u062a\u0627\u0632\u0647 \u06a9\u0627\u0631 \u0647\u0633\u062a\u06cc\u062f \u06cc\u0627 \u0641\u0642\u0637 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u062c\u062f\u06cc\u062f \u0646\u0638\u0631 \u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u0627 \u0622\u0646 \u0631\u0627 \u0645\u0631\u062d\u0644\u0647 \u0628\u0647 \u0645\u0631\u062d\u0644\u0647 \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":74867,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-74866","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/74866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=74866"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/74866\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/74867"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=74866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=74866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=74866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}