?? ????? ???? ?? ?? ???? ??????

???? ???? ???? ??? ?? ?? ??(???? ??)? ???? ??? ?????.

? ??? ?? ?? ???? ??? ?? ? ????.

Infinite? ????? ??? ???? ? ??? ???? ???? ????? ?????.

?????. ??? ? ???? ????

?? ???

???? ????? ???? ?? ????? ??? ??? ??? ???.

?? ????? ? ?? ??? ???? ? ?? ?? ?? ???? ???? ????? ?? ?? ???? ???? ??? ??????.

? ??? ???? ? ????. (?, ?? ?? ??? ?? ???? ?????.)

?? ???? ???? ??? ?? ?? ? ?? ???? ?? ? ??? ???.

??

?? ???? ????? ???? ??? ???? ????? ????? ?? ???? ???.

??? ??? ??? ???? ?? ??? ?? ?? ????? ??? ??? ??? ?? ?? ??? ? ????.

??? ? ?? ??? ???? ??? ???(??)? ??? ?? ?????? ???? ?? ????.

???? ??? ????

??? ???

???? ??? ??? ??? ??? ? ?? ? API???.

? ??("sentinel")? ????(???? ???? ?? ??? ??????.

? ??? ?? ? ?? ???? ??? ????? ??? ? ????.

? ?? ??? ?????? ?????, ?? ?? ???? ??? ??? ??????.

---

Reactjs?? Intersection Observer? ???? ?? ?? ??? ?? ?? ??? ???? ?? ???? ??? ????.

? ????? ???? ?? ??? ?? ? ?? ??? ?? ??? ??? ? ????.

import { useEffect, useRef, useState } from "react";

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

?? ??? ??? ???(?????? ?)? ???? ???? ??? ???? ?? ?????. ?? ?? ???? ? ?? ???? ???? ?????.

---

??. ?? ? ?? ???

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

cardRefs ???? ??? ???? DOM ??? ???? ?????.

containerRef ??? ??? ????? ?????.

listItems ???? ?? ???? ??? ??? ?????.

?. ?? ??? ? ?? ??

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

containerRef ???? ??? ????? ?????.

cardRefs ??? ? ??? ??? ?????. ?? ?? ????? ????? ??(?: ??? ??)? ??? ? ????.

listItems? ???? ??? ? ??? ??????.
? div? ?? ???? ???? React? ?? ??? ?? ????.

??. ?? ???(??)? ?????.

import { useEffect, useRef, useState } from "react";

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

?? ??

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

root ??? ????? ?????.

containerRef.current? ?? ??? ???? div? ?????.
??? null?? ????? ???? ?????.

rootMargin: ?? ??? ?? ??? ?????.

'0px'? ?? ??? ??? ?????. "100px"? ?? ?? ???? ???? ? ?? ???? ? ????(?: ??? ???? ??? ?).

???: ???? ????? ?? ????? ?? ?? ??? ?? ?????.

0.5? ??? ??? 50%? ???? ??? ?????? ?????.

??? ???

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

IntersectionObserver ?? ??? ?? ??? ?? ??? ?????.

??? ??? ??? ??? ??? ??? ??? ??? ?????.

entries ????? ??? ??? ?????. ? ???? ??? ?????(?????)? ?? ??? ?????.

entry.isIntersecting? true? ?? ?? ??? ??? ????? ?????.

1. setListItems? ???? ??? ? ??? ?????.
2. ?? ???? ????? ?? ??(entry.target)? ???? ???.

??? ?? ??

 useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe each card
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

cardRefs.current: ?? ??? ?? ??? ?????.

listItems.length - 1: ??? ??? ??? ?????.

lastCard? ???? ??,observer.observe(lastCard)? ???? ??? ?????.

???? ? ??? ?????? ??? ???? ??? ??????.

??

const options = {
  root: containerRef.current, // Observe within the container
  rootMargin: "0px",         // No margin around the root container
  threshold: 0.5,           // Trigger when 50% of the element is visible
};

observer.disconnect()? ? useEffect? ?? ??? ?? ???? ?????.

??? ?? ?? ??? ??? ????? ?? ???? ? ?? ???? ?????.

---

? ????? ?? ?? ??????

1. ??? ???

???? ????? ??? ??? ?????

2. ??? ??? ???

??? ??? 50%? ??? ???? ??
?????.

3. ?? ??

??? ??(setListItems)? ? ??? ?????.

4. ??

???? ?? ??? ??? ??? ??
? ?????. ??? ??? ?????.

??? Intersection Observer? ???? ?? ???? ???? ?????.

??? ???? ???? :)

?????.

? ??? Reactjs ????: Intersection Observer? ??? ?? ???.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!