Tips for efficiently rendering over 200 views in React Native without sacrificing performance

Question

Tips for efficiently rendering over 200 views in React Native without sacrificing performance

I've been working on a game project using react-native and I'm facing an issue with rendering over 200 views on the Game screen. Each view should have a pressable functionality that, when pressed, will change the background color of the view and update the score in the game context. However, there seems to be a delay whenever I try to press any of the views for the changes to take effect.

Note

My development environment is Expo and I'm testing the game on a real device.

View Component Snippet

import { useEffect, useState, memo } from "react";
import { useContext } from "react";
import { gameContext } from "./gameContext";
import { Pressable, View } from "react-native";

// Code for CheckBoxCom component

export default memo(CheckBoxCom);

Game Screen Component Snippet

import { useContext, useEffect, useState } from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, FlatList } from "react-native";
import CheckBox from "./CheckBox";
import { gameContext } from "./gameContext";

// Code for Game screen component

export default function Game({ navigation }) {
  
}

const styles = StyleSheet.create({
  // Styles for textHeader and checkBoxContainer
});

Is there a way to improve the performance so that the view function runs immediately upon pressing it?

javascript reactjs react-native react-hooks expo

Answer 1

Answer №1

One of the main reasons for the slow performance is due to the fact that when a view is clicked, all 200+ CheckBoxCom components are re-rendered unnecessarily. To improve performance, we can work on preventing these unnecessary re-renders.

The issue seems to stem from the gameContext, which consolidates multiple states. Any changes to these states trigger a re-render of all components. The score state, accessed within each CheckBoxCom, plays a key role in triggering re-renders. By modifying the handlePress() function as follows:

const handlePress = () => {
  if (active) return;
  setActive(true);
  setScore(score => score + 1);
};

We can utilize a callback to update the score without needing to retrieve it from the context. This allows us to remove the score from the game context provider, thereby preventing unnecessary re-renders across components even if the score is not explicitly referenced.

It's important to avoid having numerous state variables within a single context. Segmenting them into separate contexts based on different states can help reduce redundant re-renders within the CheckBoxCom components.

Considering that the CheckBoxCom components possess internal state, implementing React.memo() alone may not effectively prevent re-renders triggered by prop changes only.

To optimize and utilize React.memo(), refactoring to lift the active state to the parent component as activeViews, and passing it as a boolean prop alongside

setScore</code instead of via context, can be beneficial. Additionally, wrapping <code>setState

methods with useCallback() may not always be necessary.

This approach leads to CheckBoxCom components devoid of internal states and external dependencies, making them pure components compatible with React.memo().

Answer 2

One of the main reasons for the slow performance is due to the fact that when a view is clicked, all 200+ CheckBoxCom components are re-rendered unnecessarily. To improve performance, we can work on preventing these unnecessary re-renders.

The issue seems to stem from the gameContext, which consolidates multiple states. Any changes to these states trigger a re-render of all components. The score state, accessed within each CheckBoxCom, plays a key role in triggering re-renders. By modifying the handlePress() function as follows:

const handlePress = () => {
  if (active) return;
  setActive(true);
  setScore(score => score + 1);
};

We can utilize a callback to update the score without needing to retrieve it from the context. This allows us to remove the score from the game context provider, thereby preventing unnecessary re-renders across components even if the score is not explicitly referenced.

It's important to avoid having numerous state variables within a single context. Segmenting them into separate contexts based on different states can help reduce redundant re-renders within the CheckBoxCom components.

Considering that the CheckBoxCom components possess internal state, implementing React.memo() alone may not effectively prevent re-renders triggered by prop changes only.

To optimize and utilize React.memo(), refactoring to lift the active state to the parent component as activeViews, and passing it as a boolean prop alongside

setScore</code instead of via context, can be beneficial. Additionally, wrapping <code>setState

methods with useCallback() may not always be necessary.

This approach leads to CheckBoxCom components devoid of internal states and external dependencies, making them pure components compatible with React.memo().

Answer 3

Answer №2

Implementing pagination using flatlist

For more information: Pagination in flatlist

import React, { Component } from 'react';
{
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  FlatList,
  Platform,
  ActivityIndicator,
} from 'react-native';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      serverData: [],
      fetching_from_server: false,
    };
    this.offset = 0;
  }
 
  componentDidMount() {
    fetch('https://www.doviz.com/api/v1/currencies/all/latest')
      .then(response => response.json())
      .then(responseJson => {
       responseJson = responseJson.slice((this.offset*12),((this.offset+1)*12)-1)
                 console.log("offset : "+this.offset);

         console.log(responseJson.slice((this.offset*12),((this.offset+1)*12)-1));
        this.offset = this.offset + 1;
        
        this.setState({
          serverData: [...this.state.serverData, ...responseJson],
          loading: false,
        });
      })
      .catch(error => {
        console.error(error);
      });
  }
 
  loadMoreData = () => {
    this.setState({ fetching_from_server: true }, () => {
      fetch('https://www.doviz.com/api/v1/currencies/all/latest')
          .then(response => response.json())
          .then(responseJson => {
           responseJson = responseJson.slice((this.offset*12),((this.offset+1)*12)-1)
            console.log("offset Load : "+this.offset);
          console.log(responseJson);
          
            this.offset = this.offset + 1;
            
            this.setState({
              serverData: [...this.state.serverData, ...responseJson],
              fetching_from_server: false,
            });
          })
          .catch(error => {
            console.error(error);
          });
    });
  };

  renderFooter() {
    return (
      <View style={styles.footer}>
        <TouchableOpacity
          activeOpacity={0.9}
          onPress={this.loadMoreData}
          style={styles.loadMoreBtn}>
          <Text style={styles.btnText}>Loading</Text>
          {this.state.fetching_from_server ? (
            <ActivityIndicator color="white" style={{ marginLeft: 8 }} />
          ) : null}
        </TouchableOpacity>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        {this.state.loading ? (
          <ActivityIndicator size="large" />
        ) : (
          <FlatList
            style={{ width: '100%' }}
            keyExtractor={(item, index) => index}
            data={this.state.serverData}
            renderItem={({ item, index }) => (
              <View style={styles.item}>
                <Text style={styles.text}>
                  {item.currency}
                  {'.'} 
                  {item.code}
                </Text>
              </View>
            )}
            onEndReached={this.loadMoreData}
            onEndReachedThreshold ={0.1}
            ItemSeparatorComponent={() => <View style={styles.separator} />}
            ListFooterComponent={this.renderFooter.bind(this)}
          />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 30,
  },
  item: {
    padding: 10,height:80
  },
  separator: {
    height: 0.5,
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  text: {
    fontSize: 15,
    color: 'black',
  },
  footer: {
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  loadMoreBtn: {
    padding: 10,
    backgroundColor: '#800000',
    borderRadius: 4,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnText: {
    color: 'white',
    fontSize: 15,
    textAlign: 'center',
  },
});

Answer 4

Implementing pagination using flatlist

For more information: Pagination in flatlist

import React, { Component } from 'react';
{
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  FlatList,
  Platform,
  ActivityIndicator,
} from 'react-native';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      serverData: [],
      fetching_from_server: false,
    };
    this.offset = 0;
  }
 
  componentDidMount() {
    fetch('https://www.doviz.com/api/v1/currencies/all/latest')
      .then(response => response.json())
      .then(responseJson => {
       responseJson = responseJson.slice((this.offset*12),((this.offset+1)*12)-1)
                 console.log("offset : "+this.offset);

         console.log(responseJson.slice((this.offset*12),((this.offset+1)*12)-1));
        this.offset = this.offset + 1;
        
        this.setState({
          serverData: [...this.state.serverData, ...responseJson],
          loading: false,
        });
      })
      .catch(error => {
        console.error(error);
      });
  }
 
  loadMoreData = () => {
    this.setState({ fetching_from_server: true }, () => {
      fetch('https://www.doviz.com/api/v1/currencies/all/latest')
          .then(response => response.json())
          .then(responseJson => {
           responseJson = responseJson.slice((this.offset*12),((this.offset+1)*12)-1)
            console.log("offset Load : "+this.offset);
          console.log(responseJson);
          
            this.offset = this.offset + 1;
            
            this.setState({
              serverData: [...this.state.serverData, ...responseJson],
              fetching_from_server: false,
            });
          })
          .catch(error => {
            console.error(error);
          });
    });
  };

  renderFooter() {
    return (
      <View style={styles.footer}>
        <TouchableOpacity
          activeOpacity={0.9}
          onPress={this.loadMoreData}
          style={styles.loadMoreBtn}>
          <Text style={styles.btnText}>Loading</Text>
          {this.state.fetching_from_server ? (
            <ActivityIndicator color="white" style={{ marginLeft: 8 }} />
          ) : null}
        </TouchableOpacity>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        {this.state.loading ? (
          <ActivityIndicator size="large" />
        ) : (
          <FlatList
            style={{ width: '100%' }}
            keyExtractor={(item, index) => index}
            data={this.state.serverData}
            renderItem={({ item, index }) => (
              <View style={styles.item}>
                <Text style={styles.text}>
                  {item.currency}
                  {'.'} 
                  {item.code}
                </Text>
              </View>
            )}
            onEndReached={this.loadMoreData}
            onEndReachedThreshold ={0.1}
            ItemSeparatorComponent={() => <View style={styles.separator} />}
            ListFooterComponent={this.renderFooter.bind(this)}
          />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 30,
  },
  item: {
    padding: 10,height:80
  },
  separator: {
    height: 0.5,
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  text: {
    fontSize: 15,
    color: 'black',
  },
  footer: {
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  loadMoreBtn: {
    padding: 10,
    backgroundColor: '#800000',
    borderRadius: 4,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnText: {
    color: 'white',
    fontSize: 15,
    textAlign: 'center',
  },
});

Tips for efficiently rendering over 200 views in React Native without sacrificing performance

Answer №1

Answer №2

Similar questions

How can I set a header to be automatically included in every "render" response in Node.js/Express?

Creating pathways in AJAX with Rails

Unable to use console log in shorthand arrow function while working with Typescript

Is there a way to include multiple TinyMCE editors with unique configurations for each one?

Is there a way to showcase the value of this.state in save.js?

Tips for eliminating fade effect during hover in networkD3 chart in R

Having trouble with React testing-library: Why is the file upload empty when testing a PDF file?

Is it possible to detect inline elements that have been wrapped?

Unable to save or create files in Store.js

The dynamic categorization feature in Redux Form

Creating a stunning image carousel in Vue by integrating a photo API: step-by-step guide

Recurrence of solely the middle segment of the separator's background picture

How can I trigger an event to append a UL element using

Incorporate a personalized add-button into the material-table interface

Selenium htmlUnit with dynamic content failing to render properly

Failure of React Library in Production Mode on Webpack 4

Is there a way to retrieve data from three different Bookshelf.js models in a single query?

Warning of superfluous escape character when executing 'npm start' on a React application

Navigating through various div elements in Javascript and sending parameters to a script

Using the Table-multiple-sort feature in boostrap-table is not functioning properly when there are multiple tables present on a single page