useInView call for each component: Why do all return 'true' once the first element is in view?

[bartonyoung]

My home page loads multiple large components that I want to delay rendering until they are in view. I am lazy loading the components, and make a call to useInView() once per component, giving each their own ref. However, once the first component comes into view, all of the other component chunks load as well. Am I doing something wrong?

Attached is a gist of the code.

https://gist.github.com/bartonyoung/e1457f9414891f90edba17cf7e1765d7

[thebuilder]

Not sure what the components are doing. But most likely is your styling that causes all the components to start inside the viewport. Are you just rendering an empty ‹div› with your ref, until they come into view?

[bartonyoung]

Good catch. I needed to set a height on my containing section. Thank you.