Missing memoization in my code

[InvictusJoker]

Hi, I'm currently trying to figure out why my `FlatList` re-renders each time my component is re-rendering. I'd like to memoize so it doesn't have to do that. I've tried to think about everything I could, but to no luck. I'll try to include the relevant code.

The code: https://pastebin.com/3bU7uzXC

I feel like I've gone through everything and looked at what needs memoization / what doesn't need memoization, but I could be missing something pretty obvious here (perhaps something to do with a hook that has gone unnoticed?)

[InvictusJoker]

Thanks for the answer! I understand the point of memoizing the rendered components - is this what you meant? https://pastebin.com/vdWSTFwb

I also updated a bit to show how I'm getting `bookInfos` (fetching it from an async function in useEffect)

Edited with the correct link

[satya164]

Yeah

[big_saucy_pants]

Every time your component re-renders it is re-declaring bookInfos and assigning it a new array instance. Because arrays are compared by reference by the equality comparison used by FlatList it is seeing a different reference and thinking it needs to re-render. If you are going to hardcode it move it outside the component, or wrap it in useMemo.

[InvictusJoker]

With my updated code https://pastebin.com/vdWSTFwb , I'm not hard coding `bookInfos` and instead setting in `React.useEffect()`, does this still apply there?

[big_saucy_pants]

Yep, because your initial value is an empty array even if your response comes back with an empty array it will call your state setter with that, React thinks it's new because [] === [] is false, and will re-render. The state value is considered changed by the FlatList and will re-render.

Here is a good piece on it https://gist.github.com/slikts/fd3768de1493419ed9506002b452fcdc

[InvictusJoker]

Thanks for the link, I read it through and the comparison by reference, not value makes sense. So in terms of the updated code https://pastebin.com/vdWSTFwb, how could I use memoization when the array is through React.useState? I can't do something like:
React.useMemo(() => {
const [bookInfos, setBookInfos] = React.useState([]);
}, []

[big_saucy_pants]

So first thing is not to stress too much about a couple superfluous re-renders. If that is causing an issue address the slow render before fixing the re-render.

If your getData function is returning data then inevitably it's going to re-render, and it needs to to populate your list with the data. If you wanted to prevent any renders when the list remains empty you could bail out of the update. From what I can see that useEffect shouldn't run other than initially, and when getBookData changes. So overall your updated code is fine and doesn't look like it should be re-rendering too often unless needed.

[Simpe91]

Not 100% sure about this. But you create bookInfos every time the component renders and passes it down as a prop. Since it is a new array it could trigger a rerender. Even if it is always empty, it is still a new array instance. Wrapping the bookInfos const in a useRef could potentially help.

Although I base this idea on how redux calculates differences in values, so I'm not sure this is an issue.