In D6466#193738, @ashoat wrote:

RE the rest – you need to think harder about memoizing. Can you please make sure that FlatList won't rerender when ThreadSettingsMediaGallery rerenders, unless it needs to?

I considered wrapping the FlatList inside a React.useMemo() hook, but after doing some research, I thought it wouldn't be necessary. My understanding is that FlatList only re-renders when it's data prop is changed. Is encompassing the FlatList in a memo hook necessary here, as I may have misunderstood the docs and FlatList ends up re-renders each time ThreadSettingsMediaGallery re-renders?

I could memoize it with

const flatList = React.useMemo(() => { ... }, [mediaInfos, memoizedStyles, styles]}

You don't need to memoize the rendering of the FlatList, but you should think about what else you need to memoize here

In D6466#193973, @ashoat wrote:

You don't need to memoize the rendering of the FlatList, but you should think about what else you need to memoize here

I'll give it some more consideration, though one of my immediate thoughts is that renderItems is something to optimize here with React.useCallback to prevent unnecessary recomputing since the dependency array would hold [styles, memoizedStyles].

Still missing some memoization. We need to get you to a point where you can figure this out yourself, and you don't need repeated review cycles every time you introduce a hook. Can you figure out what you're doing that is causing the whole FlatList to rerender every time ThreadSettingsMediaGallery renders? Going forward, would be great if I don't have to request changes for memoization again

In D6466#195876, @ashoat wrote:

Can you figure out what you're doing that is causing the whole FlatList to rerender every time ThreadSettingsMediaGallery renders?

I've done some work and I've realized we need to memoize what's being rendered via renderItem, so extracting everything out of renderItem into a component with React.memo should do that. Then, within renderItems we just render the new component. I think that's the last bit of memoization I'm missing - sorry for the back and forth.

This is now the fifth time I've requested changes on this diff regarding memoization. I highly suggest changing your meta-approach to revising this diff

(FWIW https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/ was very useful for me (and I think others eg Abosh?) in understanding React rendering behavior/memoization/etc. There's a lot of stuff on eg StackOverflow and misc Medium blogs that's incorrect/inconsistent.)

In D6466#197440, @atul wrote:

(FWIW https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/ was very useful for me (and I think others eg Abosh?) in understanding React rendering behavior/memoization/etc. There's a lot of stuff on eg StackOverflow and misc Medium blogs that's incorrect/inconsistent.)

Thanks for the link, I'll be sure to give it a full read through