Import On Visibility

Besides user interaction, we often have components that aren't visible on the initial page. A good example of this is lazy loading images that aren't directly visible in the viewport, but only get loaded once the user scrolls down.

As we're not requesting all images instantly, we can reduce the initial loading time. We can do the same with components! In order to know whether components are currently in our viewport, we can use the IntersectionObserver API, or use libraries such as react-lazyload or react-loadable-visibility to quickly add import on visibility to our application.

When to Use

• Use this for components that aren't visible on the initial page (e.g., below-the-fold content)
• This is helpful for lazy loading images, widgets, or heavy components as the user scrolls

When NOT to Use

• For above-the-fold content that must render immediately — deferring it causes visible layout shifts and slow LCP
• When the component is lightweight enough that lazy loading adds more overhead than it saves
• When the content is critical for SEO and needs to be present in the initial HTML

Instructions