0

I have a list of items that I want to render. When the user gets to the bottom of the list, it loads more items. The problem is that the page is a ScrollView, so I can't use FlatList to render it (you can't use ScrollView inside ScrollView). Right now I use map to do it.

ItemsList.js:

export const ItemsList = (props) => {
    const { type, isEndReached } = props;
    const [items, setItems] = useState([]);
    const [page, setPage] = useState(1);

    useEffect(() => {
        if (!items.length || page > 1) {
           getItemsList(type);
        }
    }, [page, type]);

    useEffect(() => {
        if (isEndReached && isLoadMore) {
            setPage(page + 1);
        }
    }, [isEndReached]);

    const getItemsList = async (type) => {
        const loadedItems = await ItemService.getItems(page, type);
        setItems(_.concat(items, loadedItems));
    };

    const renderItem = (item, idx) => {
        return (
            <Item
                key={item.id}
            />
        )
    }

    const RenderList = () => {
        return items.length ? items.map((item, idx) => renderItem(item, idx)) : null;
    };

    render (
        <View>
            <RenderList/>
        </View>
    )
}

ItemsList component is located inside ScrollView page.

When I load more results, I concat the items array from state with the new array from server, and set the new array as the items list. This makes the whole list to render again (even though each item have different id).

How do I make the list to render only the additional items and not the whole list?

Thanks!

maya dahan
  • 205
  • 3
  • 15
  • What do you mean by only render additional items and not the whole list? can you provide the lists of data from your code and what you mean? Do you mean that you only want to load new items from the `ItemService`? – Amir5000 Dec 03 '19 at 16:52
  • I have thousands of records on server, I bring to the client side 10 records (items) each time. when the user get to the end of the list, the page number increase by 1 and I get the next 10 new items. Then I update the items state with the new items. (20 items total - for example) – maya dahan Dec 03 '19 at 16:56
  • Does this answer your question? [FlatList re-render all data when new data is added](https://stackoverflow.com/questions/57381341/flatlist-re-render-all-data-when-new-data-is-added) – VilleKoo Dec 03 '19 at 17:01

0 Answers0