High Memory Usage When Normalizing Data with Normalizr in FlashList

[jdarshan5]

I'm experiencing high memory usage in my React Native app when rendering a large list using FlashList. The issue seems to arise due to how I'm accessing normalized data (normalized using Normalizr) inside the renderItem function. Specifically, I'm retrieving each item from the Redux store using store.getState() for every render.

I have tried accessing the data using both useSelector and direct store access (store.getState()), but both approaches lead to high memory consumption and performance issues.

Steps to Reproduce:

1. Normalize data using Normalizr and store it in Redux.
2. Access each item in renderItem via direct store access.
3. Render a large list using FlashList.

Expected Behavior:

• Efficient memory usage when accessing normalized data.
• Smooth rendering of a large list without excessive memory consumption.

Observed Behavior:

• High memory usage when accessing normalized data within renderItem.
• Performance degradation, potentially due to frequent store access.

export const getMomentItem = (id: string | number) => {
  return store.getState().activity.activityEntity[id];
};

const renderItem: ListRenderItem<FeedItemType> = useCallback(
  ({ item }) => {
    const data = getMomentItem(item);
    const { media_type, media_back_multiples } = data;
    const type = getFeedRenderItemType(media_type, media_back_multiples);

    if (type === 'image') {
      return <ImageComponent />;
    } else if (type === 'image_2') {
      return <ImageComponentType2 />;
    } else {
      return <ImageComponentType3 />;
    }
  },
  []
);

<FlashList
  estimatedItemSize={height}
  renderItem={renderItem}
  getItemType={(item) => (item === 'user-suggestions' ? 'user-suggestions' : item)}
  pagingEnabled
  showsVerticalScrollIndicator={false}
  {...restProps}
/>

Questions:

• Is this issue related to FlashList's rendering mechanism?
• Does Redux store access contribute significantly to memory overhead in this scenario?
• Could JavaScript's object access pattern be affecting memory allocation?

Environment:

• react-native: ^0.76.7
• @shopify/flash-list: ^1.7.3
• @reduxjs/toolkit: ^2.5.1,
• normalizr: ^3.6.2

Would appreciate any insights or recommendations on resolving this issue!

[markerikson]

Accessing the store is just returning existing references already in memory. So no, I don't think Redux is related to this at all.

[jdarshan5]

Then why is getMomentItem is the culprit in this case cause if I comment it out then memory consumption is normal, and only shoots up after I access that function, have you tried it by creating a reproducible project?