I have a react functional infinite scroller component that fetches data from an api, The GetImages function flips a loading State variable to denote its status and appends to another state variable that contains links to images.

  async function GetImages()
  {
    //sets loading to true
    //fetches data from api and appends to the current images
    //sets loading to false
  }

I also have a useEffect hooked up to the window to check if the user has scrolled all the way to the bottom

  useEffect(()=>{
    window.addEventListener('scroll',handleScroll)
  },[])

The handler for the scroll checks if the user has reached the bottom and increases the page by one which then triggers a useEffect that calls GetImages once again.

  const handleScroll = (e) =>
  {
    console.log(pageRef.current);
    if(window.innerHeight+e.target.documentElement.scrollTop +1 >= 
    e.target.documentElement.scrollHeight && !loadingRef.current)
    {
      console.log("reached the end"+pageRef.current)
      setPage(page => page + 1);
    }
  }

Finally this component returns ImageCell components (basically image tags) by mapping them to each image and adds a loading spinner at the bottom if new images are currently being loaded.

  return(
   <Container> 
    <h1>Images</h1>
     {images.map((image,index)=>{
      return(<ImageCell link={image} key={index} id={index}></ImageCell>)
     })}
     <Container className='loader' >{loading ? 
        <span className="react-logo">
        <span className="nucleo">
        </span></span>
        : <span></span>}
     </Container>
     </Container>
      )
}

Once the user has more than a few pages rendered I'd like to do the following things;

• Stop rendering elements that are a certain distance away from where the user is currently looking (i.e. remove them from the dom)
• Cache the removed elements to be re-rendered once again to avoid calling the API again for the same page of data
• Re-render the cached components once they're about to come into view.

Assuming I want to do this for both directions (up and down) how would I accomplish this?