infinite scroll react native - inefficient

Đúng rồi bạn, bởi vì 2 libs kia đang làm là khi scrollToBottom sẽ render thêm 1 bản data copy. Mình chưa hiểu rõ ý bạn hỏi lắm?

1. Sao bạn muốn 1 list mà lại infinite scroll nhỉ? Mình đang hiểu nó giống như là 1 Slide
2. Còn theo cách hiểu thứ 2 của mình là bạn đang có nhiều data quá và khi scroll càng nhiều xuống dưới thì sẽ gây ra tình trang lag, giật có khi crash.

Nếu bạn muốn hiển thị giống slide thì cũng có rất nhiều thư viện, còn bạn đang mắc với vấn đề số 2 thì mình có thể gíup nhá

@longnk1301 đúng là cách hiển thị theo slide, nhưng item đang được chọn sẽ được dùng làm việc khác ạ, item mình lấy từ api trả về tầm 20 ~ 30 items Please help mình với

nó sẽ giống popup như trong ảnh này, item sẽ được chọn và được push lên API ạ

@ManCi Item được chọn thì có sao đâu bạn?? bạn vẫn render default thì lấy 10 data (bạn có thể sử dung redux), tiếp theo scroll thì lấy thêm 10, đến khi hết item thì cũng là hết cái listview đó, và Slider sẽ cuộn lại mà?

@longnk1301 mình k hiểu ý bạn lắm, nhưng mình đã làm thử render 10 items rồi cuối list lại lấy thêm 10 items, mình đã làm cái này và đến đoạn lấy 10 items tiếp theo nó bị dật 1 phát lúc set lại state ạ, bạn demo nhẹ cho mình phát với, mình cám ơn nhiều

@ManCi view này bạn render và setState mình thấy có vẻ nhiều, có thể là do chưa tối ưu code, bạn viết 1 hàm render, 1 function như nào nhỉ?

bạn đang xử lý chọn xong là gửi nên server luôn??

@longnk1301 để mình demo cậu xem, đợi xí nhé

@ManCi được thì bạn cho mình xem function đoạn chọn item rồi setState nhá

@longnk1301 đây, bạn cop code về chạy xem https://codepen.io/thanh-manci/pen/EzORvL?editors=0010

@longnk1301 mình nghĩ vấn đề nằm ở chỗ code react native nó call api native nên chắc chắn sẽ có độ trễ vì vậy khó để làm được 1 cái infinite scroll mượt mà

@ManCi em đang demo. đúng rồi bạn, vì mình scroll tới cuối là lại gọi lên server mà. Nếu không có nhiều data bạn có thể đợi gọi all data rồi hiển thị hết luôn xem sao

@longnk1301 thực ra data có sẵn khi call api rồi, nên k cần gọi lại, nhưng hễ set state lại là dật ngay

@ManCi checkScroll() bạn chuyển về arrow function thử chưa

@longnk1301 cũng vậy à

@ManCi Mình test app của bạn thì thấy là do trong hàm checkScroll có nhiều if nên gây ra chậm và đang render key trùng nhau giờ mình có 2 giải pháp nhá.

1. bạn nên optimize lại hàm checkScroll sao cho hợp lý, mỗi khi scroll tới cuối thì hãy tăng key cuối cùng nên 1 đơn vị tránh trùng nhau
2. cách này mình thấy hiệu quả nhất, đó là ví dụ bạn có 100 object, default render 5 object, khi scroll được 20 object thì xoá các object phía trên đi, và nếu scroll lại thì render chèn vào lại, như vậy mình nghĩ sẽ nhanh hơn cách của bạn đang dùng bây giờ đấy