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?

[Om-singh-ui]

I don’t think this is a Redux or Normalizr issue directly it’s more about where and how the data is being accessed.

Calling store.getState() inside renderItem means that lookup runs on every render cycle, and with FlashList that can happen very frequently due to recycling and re-measuring. Even if Redux is just returning references, repeatedly accessing a large normalized object in a hot path like this can create memory churn and GC pressure, which looks like a memory spike.

That’s likely why commenting out getMomentItem reduces memory usage you’re removing work from the render loop.

[jdarshan5]

Well actually we were doing a silly mistake in using FlashList, we were passing unique id for each item in getItemLayout which led to this issue, as internally it was creating new layouts for each item which is not ideal, and accessing store.getState() does not create problem, you can access it as many times as you want