How can I implement lazy loading in a React Native Web app?

How can I implement lazy loading in a React Native Web app?

You can implement lazy loading in a React Native Web app using React's built-in React.lazy and Suspense. This allows you to load components only when they are needed.

Can you provide a code example for that?

Sure! Here's a simple example:

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>My React Native Web App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

This code will load LazyComponent only when it's rendered.

What if I want to lazy load images instead?

For lazy loading images, you can use the IntersectionObserver API or libraries like react-lazyload. Here's a basic example using IntersectionObserver:

import React, { useEffect, useRef, useState } from 'react';

function LazyImage({ src, alt }) {
  const [isVisible, setIsVisible] = useState(false);
  const imgRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        setIsVisible(true);
        observer.disconnect();
      }
    });
    if (imgRef.current) {
      observer.observe(imgRef.current);
    }
    return () => observer.disconnect();
  }, []);

  return <img ref={imgRef} src={isVisible ? src : ''} alt={alt} />;
}

This will load the image only when it comes into the viewport.