I have a React Native app where users can switch between two tabs (tab1 and tab2). Each tab displays different data using a FlatList. I’m using useMemo, useCallback to optimize the data that gets rendered depending on which tab is selected. However, when switching tabs, the animation becomes very slow in Tab component.

const handleChangeTab = useCallback((selectedTab: string) => {
    setTab(selectedTab);
}, [tab]);

const posts = useMemo(() => {
    return tab === 'tab1' ? data1 : data2;
}, [tab, data1, data2]);

<AnimatedFlatList
    data={posts}
    renderItem={renderItem}
    ...otherProps
/>

I’ve tried optimizing it with initialNumToRender, maxToRenderPerBatch, and removeClippedSubviews, keyExtractor, memo in renderItem but the issue persists. Also tried using two Flatlist for each tab. concat two different arrays for one Flatlist also think not a good idea.