Question 35307 in React native Question posted in
The official React Native documentation can be found here.

Are there some components to replace Flatlist in React Native for better performance

My problem is I’m using Flatlist component to render items that are not pure components. they have a bunch of states, hooks, and many functions to handle logic. Moreover, my list also has many items, at least 28 items because I want to render some information in a month. the number of items may be bigger when I fetch more data for other months.
As a result, my app’s performance is really slow. Are there any solutions out there?

Tags:

2

Answers


  1. 0

    I think you have to use pagination to increase the performance. If you want the best possible performance with Flatlist you should do pre and post pagination. Like you have to add and remove equal amount of items from data array passed to Flatlist simultaneously.

    i.e
    let suppose you want to maintain the 50 items count in the array.

    const [data,setData]=useState([])
const useEffect(()=>{
//fetch initial 50 items from api
  setData([...50item...])
},[])

//when scrolling down the Flatlist
onFlatlistScrollDownEndReached = ()=>{
//fetch let suppose 10 more post items from api page# wise
let prevData= data.splice(10,data.length) //remove first 10 items
let new10Items = [...10 fetched from api...]
 setData([...prevData,... new10Items])
}

//when scrolling up the Flatlist
onFlatlistScrollUpEndReached = ()=>{
//fetch let suppose 10 pre items from api page# wise
let prevData= data.splice(data.length-10,data.length) //remove last 10 items
let new10Items = [...10 fetched from api...]
 setData([... new10Items,... prevData])
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search