Using code-splitting and lazy loading in ReactJS development

Introduction:

Using code-splitting and lazy loading is a best practice in ReactJS development. It can help improve the performance of your application by only loading the code that is needed for the current page.

Code-splitting is the process of separating your code into smaller chunks, so that the browser only has to download the code that is needed for the current page. This can help to reduce the initial load time of your application, and make the overall experience faster for the user.

Examples:

React Router provides a way to do code-splitting, by using React.lazy and Suspense . React.lazy is a function that allows you to load a component lazily, and it can be used with Suspense to handle the loading state.

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

In this example, we are using React Router to handle routing in our application. We are using React.lazy to load the Home and About components lazily. We are also using the Suspense component to handle the loading state. When the user navigates to the / or /about route, the corresponding component will be loaded lazily.

Lazy loading is a technique that allows you to load a component only when it’s needed. This can help to reduce the initial load time of your application, and make the overall experience faster for the user.

import React, { useEffect } from 'react';

function Image({ src }) {
  const [imageSrc, setImageSrc] = useState(null);

  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => setImageSrc(src);
  }, [src]);

  return <img src={imageSrc} alt="" />;
}

export default Image;

In this example, we are using the useEffect hook to lazy load an image. The useEffect hook runs after the component has rendered, and in this case, it creates a new Image object, sets its src property to the src prop passed to the component and adds an onload event listener. When the image is loaded, the onload event is triggered and the setImageSrc function is called, which updates the state with the src of the image, and the image is rendered. This way, the image is only loaded when it’s actually needed, and it doesn’t slow down the initial load time of the page.

Summary:

In conclusion, using code-splitting and lazy loading is a best practice in ReactJS development. It can help to improve the performance of your application by only loading the code that is needed for the current page. By using tools like React Router and React’s built-in hooks, you can split your code into smaller chunks and load them lazily, which can make your application faster and provide a better user experience. It can also make your application more scalable and maintainable.