Estoy tratando de construir la función Lazy Loading con react-intersection-observer , el objetivo es cargar solo las imágenes en los cuadros si están en la ventana gráfica.

• Actualmente, cuando me desplazo a los últimos elementos, mostrará todas las imágenes de los cuadros.
• Pero cuando me desplazo hacia arriba y los últimos cuadros están fuera de la ventana gráfica, todo lo que está arriba desaparecerá.
• Si inView , esto se vuelve true cuando me desplazo a los últimos elementos y se vuelve false cuando los últimos elementos están fuera de la ventana gráfica.

¿Cómo solucionar este problema para que solo represente los cuadros que están en la ventana gráfica?

GIF de demostración:

Mi código:

Aplicación.js

 export const AppContext = createContext(); function App() { const { ref, inView, entry } = useInView({ rootMargin: "50px 0px", initialInView: true // triggerOnce: true, }); return ( <AppContext.Provider value={{ ref, inView, entry }}> <div className="App"> <Posts /> </div> </AppContext.Provider> ); } export default App;

Post.js

 import { useContext } from 'react' import { AppContext } from '../App' function Post({ post }) { const { ref, inView } = useContext(AppContext) return ( <div className="post" ref={ref}> {inView ? <img src={post.imgUrl} alt={post.title} className="post__img" loading="lazy" /> : <div className="post__img" /> } <h1 className="post__title">{post.title}</h1> </div> ) } export default Post

Actualizar:

Actualicé el enlace Codesandbox a continuación para mover useInView a Post.js y eliminé la API de contexto. ¡Ahora funciona!