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?

Ruben Lemiengre · Accepted Answer · 2023-04-21 22:04:25Z

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>; };

Mark Schultheiss · Accepted Answer · 2023-04-24 12:10:41Z

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, 2023 at 12:10

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

4 Comments

Ruben Lemiengre Over a year ago

Shouldn't it be const { ref, inView } = useInView({ rootMargin: "50px 0px", triggerOnce: true });

Mark Schultheiss Over a year ago

Potentially, I am not a react expert. The native JavaScript event hander does have the once ref: developer.mozilla.org/en-US/docs/Web/API/EventTarget/… - not sure the full context of what my thought was a month ago here...

Mark Schultheiss Over a year ago

Here is an answer with a similar construct to this: stackoverflow.com/a/57150643

Mark Schultheiss Over a year ago

You can search for the useInView options but here is another example: framer.com/motion/use-in-view/###once and another here react-spring.dev/docs/utilities/use-in-view#references

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related