How to get around re-render cards with nested elements?

Question

I have created a mobile application. It has a list of cards that contain a list of products. Initially, products contain incomplete information. We will have one reducer - ** cards **. In it, the initial state will be like this:

state = {};

When we go into the mobile application, we pull together cards with goods, after which our state is converted to:

state = {
    flowers: [
        {
            id: 1,
            name: "Rose"
        },
        {
            id: 2,
            name: "Cactus"
        }
    ],
    …
}

When I click on a product, for example, “Rose,” I get additional information about this product from the API response. Now our state looks like this:

state = {
    flowers: [
        {
            id: 1,
            name: "Rose",
            color: "red"
        },
        {
            id: 2,
            name: "Cactus",
        }
    ],
    …
}

After I wrote it in the state of our reducer, we have a re-render screen where these cards are located.

Problem:

When I change only one product in a certain card, I have re-render of all cards and all products, although only one product in one card has changed. When the trigger for changing state comes to us in reducer, then I return the new state as {... state, ... payload}. In payload, I pass:

flowers: [
    {
        id: 1,
        name: "Rose",
        color: "red"
    },
    {
        id: 2,
        name: "Cactus",
    }
],

Our data is changing, so we re-render FlatList.

Cards are located in a FlatList with a vertical orientation. Items are located in a FlatList with a horizontal orientation.

Question:

I understand that in order for us to change FlatList, we need to transfer new data to it. But is it possible to somehow avoid the re-render of all cards and all products that have not changed. After all, if there will be a lot of them, then this will cause a strong subsidence on FPS.

You need to move your single card item to different component and wrap it with React.memo, which prevent unnecessary re-rendering — demkovych, Dec 18 '19 at 16:08
@Satif I in FlatList renderItem pass a function in which I return the component. I decided to check if it was being re-render by writing console.log() in it. console.log() was called, so it rendered again, although it was wrapped in React.memo(). How can this be prevented? I understand you correctly? — Sergey, Dec 18 '19 at 16:15

How to get around re-render cards with nested elements?

0 Answers0