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;

Consider using ion virtual scroll. https://ionicframework.com/docs/api/virtual-scroll — , Apr 10 '21 at 13:21
Unfortunately, the Ionic framework does not support ion-virtual scroll in React. The other way?? — Mehdi Saqlen, Apr 11 '21 at 09:36

score 2 · Accepted Answer · answered Apr 12 '21 at 04:21

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>

@MehdiSaqlen if it works, please accept my answer. ;-) – xirururu Apr 12 '21 at 10:06 — xirururu, Apr 12 '21 at 10:06

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

1 Answers1