How to prevent components from constantly remounting when lazy-loading with react-intersection-observer?

Question

I am lazy-loading components on a React page by using react-intersection-observer:

import React from "react";
import { useInView } from "react-intersection-observer";

const LazyComponent = ({ LoadableComponent, ...rest }) => {
  const { ref, inView } = useInView({ rootMargin: "50px 0px" });
  return <div ref={ref}>{inView && <LoadableComponent {...rest} />}</div>;
};

const MyComponent = (props) => {
  return (
    <div style={{ height: "4000px", backgroundColor: "blue" }}>
      <p>This is the top of MyComponent.</p>
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Title</h1>
      <div style={{ height: "1000px", backgroundColor: "green" }}></div>
      <LazyComponent LoadableComponent={MyComponent} />
      <div style={{ height: "1000px", backgroundColor: "red" }}></div>
    </div>
  );
}

You can run the code in this sandbox.

What happens correctly: When I scroll down from the green zone and the lazy-loaded component (in blue) comes in view, it starts loading its code.

The problem is: when I scroll all the way down to the section at the bottom (in red), the lazy-loaded component will unmount. When I scroll back up and the lazy-loaded component comes in view again, it mounts again and the page 'jumps' to the top of this component.

How can I prevent this, so that scrolling is smooth and no jumping occurs?

score 0 · Answer 1 · answered Apr 21 '23 at 22:04

I found a solution already, not sure if it's the best.

Because react-intersection-observer's useInView sets inView to false as soon as the component is scrolled out of view, this will also unmount LoadableComponent. When it scrolls into view again, the component has to be mounted again. By making inView permanent after it becomes true the first time, we can avoid unmounting of LoadableComponent.

This may not be the 'cleanest' solution, so please let me know if you have a better solution for this issue.

   const LazyComponent = ({ LoadableComponent, ...rest }) => {
   const { ref, inView } = useInView({ rootMargin: "50px 0px" });
   const [keepInView, setKeepInView] = useState(false);

   useEffect(() => {
      if (inView && !keepInView) {
         setKeepInView(true);
      }
   }, [inView, keepInView]);

   return <div ref={ref}>{keepInView && <LoadableComponent {...rest} />}</div>;
};

score 0 · Answer 2 · answered Apr 24 '23 at 12:10

0

You should probably just fire it once (sniped from your original) so this just returns true after that,

const { ref, inView } = useInView({ rootMargin: "50px 0px" }, { once: true });

answered Apr 24 '23 at 12:10

Mark Schultheiss

32,614
12
69
100

Shouldn't it be const { ref, inView } = useInView({ rootMargin: "50px 0px", triggerOnce: true }); – Ruben Lemiengre May 18 '23 at 16:17
Potentially, I am not a react expert. The native JavaScript event hander does have the `once` ref: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters - not sure the full context of what my thought was a month ago here... – Mark Schultheiss May 18 '23 at 19:47
Here is an answer with a similar construct to this: https://stackoverflow.com/a/57150643 – Mark Schultheiss May 18 '23 at 19:51
You can search for the useInView options but here is another example: https://www.framer.com/motion/use-in-view/###once and another here https://react-spring.dev/docs/utilities/use-in-view#references – Mark Schultheiss May 18 '23 at 20:02

How to prevent components from constantly remounting when lazy-loading with react-intersection-observer?

2 Answers2