Lazy Loading and Code Splitting in React Native — Is That Even Possible?

Lazy loading is the practice of loading components of your software only when they are needed, rather than loading everything at once. It’s like having a butler that gives you what you need when you need it!

Simply put, lazy loading is a design pattern. You can load parts of your application as needed to reduce initial load time. For example, components and modules related to user login and registration can be loaded first. Then you can load the rest of the components based on the user’s navigation.

For sluggish loading components, utilize React.lazy() method in React Native.

React 18 is now enabled by default when you enable the New Architecture in React Native 0.69.

This implies that as soon as we move, we may start using the new capabilities in React 18. For Devs that migrate to the New Architecture or develop a new app with the New Architecture enabled, The React team anticipates that React 18 will function out-of-the-box with few adjustments because the new concurrent functionalities are opt-in by utilizing features like startTransition or Suspense.

Lazy Loading of a Normal Component

Here in this example, we will see a simple implementation of the Lazy Loading into our App

import React from "react";
import { View } from "react-native";
import { styles } from "./styles";
import ComplexComponent from "./ComplexComponent";

function App() {
  return (
    <View style={styles.container}>
      <ComplexComponent />
    </View>
  );
}

Here in the first snippet, our component will be loaded directly into our app, no matter how much time it takes to render, we will have a blank space until its time.

import React, { lazy, Suspense } from "react";
import { Text, View } from "react-native";
import { styles } from "./styles";

const ComplexComponent = lazy(() => import("./ComplexComponent"));

function App() {
  return (
    <View style={styles.container}>
      <Suspense fallback={() => <Text>Loading ....</Text>}>
        <ComplexComponent />
      </Suspense>
    </View>
  );
}

export default App;

In the second code snippet, As you can see, we need to use both React.lazy() and React.Suspense features to build a lazy-loading component in React. This will help us to have a text shown saying loading until the component finishes its render phase.

Lazy Loading of a Router Screen Component

We all know that Routers can be exhausting to our app, especially if we have a lot of expensive components loaded on our app start

import ComplexComponent from "./ComplexComponent";

<NavigationContainer>
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="complex" component={ComplexComponent} />
  </Stack.Navigator>
</NavigationContainer>;

Let's try and apply the lazy loading on that complex component

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

const ComplexComponent = lazy(() => import("./ComplexComponent"));

<NavigationContainer>
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen
      name="complex"
      component={(props) => {
        <Suspense fallback={<ActivityIndicator />}>
          <ComplexComponent {...props} />
        </Suspense>;
      }}
    />
  </Stack.Navigator>
</NavigationContainer>;

Here we are going to load chunks of data when the user navigates to that specific component so which will reduce our application's initial loading time by reducing the bundle size and Improving user experience at initial loading.

Long story short, Lazy loading is cool!! It works and it’s more suitable for large-scale applications because it helps to optimize them in a lot of aspects, but we should not overuse it, especially for small applications because splitting small bundles will have no effect but adding more configurations. also, fallback placeholders can slow down quick scrolling if we are lazy loading lists or stuff like that for example

This post covered what lazy loading is, how to implement it in React Native, and the positives and some downsides we should be aware of before utilizing it. I hope this post has helped you.