What causes the frustratingly slow transition between two components on Android?

Question

What causes the frustratingly slow transition between two components on Android?

I am currently in the process of developing a compact puzzle app that resembles a crossword using Expo, React Native, and Typescript.

Below is a concise version of the PuzzleMain component:

const PuzzleMain: React.FC<PuzzleMainProps> = ({ navigation }) => {
    let puzzle: AcrosticPuzzleData = parseAcrosticPuzzle(PUZZLE_TEXT);

    const grid = <PuzzleGrid puzzle={puzzle} />;
    const clueView = <PuzzleCluesView puzzle={puzzle} />;

    const [index, setIndex] = React.useState(0);

    return <View style={styles.container}>
        {index == 0 ? grid : clueView}
        <View style={styles.keyboardContainer}>
            <Button onPress={() => setIndex(index == 1 ? 0 : 1)} title={"See " + routes[index == 0 ? "Grid" : "Clues"].key} />
            <Keyboard />
        </View>
    </View>;
}

In summary, there are components for the "grid" and "clues," and a button allows users to switch between them.

When tapping this button, it takes approximately 3 seconds for the change to occur on my Pixel 5 test device. This delay does not occur when testing on web using Expo, so it may be specific to Android devices?

Here are some troubleshooting steps I have taken:

Memoizing the PuzzleGrid and PuzzleCluesView components (
```
const PuzzleGrid: React.FC<Props> = memo(({ puzzle }) ...
```
. However, this did not significantly improve performance. There were no console logs from a custom puzzle comparator used in the memo function, indicating re-rendering may not be the issue.
Utilizing TabView to swipe between components instead - this approach yielded better results. Nonetheless, I prefer having both options available, and adding the button to the TabView implementation resulted in similar delays.
Running npx expo start --no-dev and building an apk for installation - while this method showed faster loading times, there was still a noticeable delay of about a second or two, which is considered too slow.

android typescript react-native expo

Answer 1

Answer №1

It appears that you are implementing conditional rendering, which means the entire component is re-created whenever the condition changes. This can slow down rendering depending on the complexity of your component.

Why isn't memoization working? Memoization is an optimization technique, but it doesn't always guarantee improved performance.

To improve loading speed, consider the following:

Optimize the internal logic of PuzzleGrid and PuzzleCluesView, ensuring that sub-components that receive duplicate props are wrapped in memo and heavy items are loaded asynchronously using a loader.
Utilize InteractionManager to enhance loading speed and display loaders without causing UI freeze.
Instead of unmounting components, overlap them and manage visibility using InteractionManager to prevent unnecessary unmounting and slowdowns when rendering heavy components simultaneously.

Rather than just using {index == 0 ? grid : clueView}, consider implementing something like

<View>
    {grid}
    <View
      style={{
        // Specify height and necessary properties for visibility
        position: 'absolute',
        display: index == 0 ? 'none' : 'flex',
      }}>
      {clueView}
    </View>
</View>

I reviewed your code snippet and made updates to PuzzleMain.tsx

const PuzzleMain: React.FC<PuzzleMainProps> = ({ puzzle }) => {
  ...
  const [showClues, setShowClues] = useState(false);
  return (
    <View style={styles.container}>
      <View style={{ flex: 1 }}>
        {grid}
        <View
          style={{
            display: showClues ? "flex" : "none",
            position: "absolute",
            height: "100%",
            width: "100%",
            backgroundColor: "#fff",
          }}
        >
          {clueView}
        </View>
      </View>
      <Button
        onPress={() => setShowClues(!showClues)}
        title={`See ${showClues ? "Cues" : "Grid"}`}
      />
    </View>
  );
};

Added a screen recording to showcase the improved performance!

https://i.sstatic.net/N7KKk.gif

Answer 2

It appears that you are implementing conditional rendering, which means the entire component is re-created whenever the condition changes. This can slow down rendering depending on the complexity of your component.

Why isn't memoization working? Memoization is an optimization technique, but it doesn't always guarantee improved performance.

To improve loading speed, consider the following:

Optimize the internal logic of PuzzleGrid and PuzzleCluesView, ensuring that sub-components that receive duplicate props are wrapped in memo and heavy items are loaded asynchronously using a loader.
Utilize InteractionManager to enhance loading speed and display loaders without causing UI freeze.
Instead of unmounting components, overlap them and manage visibility using InteractionManager to prevent unnecessary unmounting and slowdowns when rendering heavy components simultaneously.

Rather than just using {index == 0 ? grid : clueView}, consider implementing something like

<View>
    {grid}
    <View
      style={{
        // Specify height and necessary properties for visibility
        position: 'absolute',
        display: index == 0 ? 'none' : 'flex',
      }}>
      {clueView}
    </View>
</View>

I reviewed your code snippet and made updates to PuzzleMain.tsx

const PuzzleMain: React.FC<PuzzleMainProps> = ({ puzzle }) => {
  ...
  const [showClues, setShowClues] = useState(false);
  return (
    <View style={styles.container}>
      <View style={{ flex: 1 }}>
        {grid}
        <View
          style={{
            display: showClues ? "flex" : "none",
            position: "absolute",
            height: "100%",
            width: "100%",
            backgroundColor: "#fff",
          }}
        >
          {clueView}
        </View>
      </View>
      <Button
        onPress={() => setShowClues(!showClues)}
        title={`See ${showClues ? "Cues" : "Grid"}`}
      />
    </View>
  );
};

Added a screen recording to showcase the improved performance!

https://i.sstatic.net/N7KKk.gif

What causes the frustratingly slow transition between two components on Android?

Answer №1

Similar questions

What could be the reason for the malfunction of this setter function?

The issue lies with the Cookies.get function, as the Typescript narrowing feature does not

Pay attention to the input field once the hidden attribute is toggled off

Encountering an error when attempting to add the 'shelljs' module to an Angular 2 TypeScript project

Encountering an error of TypeError while attempting to generate a new GraphQL

Guide to highlighting input field text using Angular

What is the correct way to write SVG markup within SVG tags in a React and NextJS environment?

Do you think this is a clever way to circumvent using ENUM for a parameter?

Is there a way to incorporate a back button feature in a webview?

Issue with TypeScript retrieving value from an array

Discovering the ASP.NET Core HTTP response header in an Angular application using an HTTP interceptor

Steps for setting up a nested route in Angular 2

Whenever I attempt to host my Node.js app using the GCP deploy command, it fails to work properly. The error message that appears states: "Module 'express' cannot be found."

Steps to resolve the 'form' variable being assigned a value but never used in axios:

The issue with converting a string into an object in Typescript

Discovering Type Definitions in Nuxt.js Project Without Manual Imports in VSCode: A Step-by-Step Guide

A data type labeled as 'undefined' needs to include a method called '[Symbol.iterator]()' which will then return an iterator

Failed attempt to log in to MySQL database from an Android application

Ensure that a particular key type is determined by the value of another key within the object (Utilizing Discriminated Unions)

Tips for avoiding the push method from replacing my items within an array?