How to reduce render time while rendering huge list of items in Ionic React

Question

I am using IonicReact to build a mobile app. I just wanna render a list of items from a local JSON file (JSON file contains an array of more than 1000 items). I map through the array items and print them by wrapping them in <IonItem>.It takes few seconds to iterate through all the items and displaying them in the browser. Please help me, how do I optimize render time, load the data fast from JSON. Code is below:

//necessary imports
import data from './data.json';

const ListItems: React.FC = () => {
const showItems = data
.map((topic) => {
return (<IonItem>{topic}</IonItem>);})
 
return (
<IonPage>
<IonContent fullscreen className="bg-style">
<IonList>{showItems}</IonList>
</IonContent>
</IonPage>
);
};
  
export default ListItems; 

Answer 1

Basically it should be two methods: 1. virtual scroll. 2. infinite scroll by cutting your large array to small chunks.

However, in your case, the virtual scroll method should be much better.

Ionic virtual scroll doesn't support react. But I found an article and reimplemented the VirtualScrollChild component:
https://medium.com/@alvinnguyen116/virtual-and-infinite-scrolling-in-react-d56a05976cd2

import React from "react"
import { useInView } from "react-intersection-observer"

interface Props {
  height?: number
}

export const VirtualScrollChild: React.FC<Props> = (props) => {
  const [ref, inView] = useInView()
  const style = {
    height: `${props.height ? props.height : 40}px`,
    overflow: "hidden",
  }
  return (
    <div style={style} ref={ref}>
      {inView ? props.children : null}
    </div>
  )
}

usage:

    <IonList>
      {your_data_list.map((data) => (
        <VirtualScrollChild height={your_height}>
          {data...}
        </VirtualScrollChild>
      ))}
    </IonList>