FlatList、Props ListHeaderComponent 和动态 flatlist 数据

Question

Sorry for the title, I wasn't inspired, and I didn't know what title to put for my problem.
I'm using Socket.io on my React native application to render some dynamics datas.
I'm using FlatList to display all this datas, and I need to show some contents like filters and buttons at the top of the FlatList .
So In my FlatList Props, I used ListHeaderComponent and in this component I display one other flatlist and contents.
My problem is:

When the main FlatList is updated with one of the Socket.io response (Every 5sec), all the components displayed by ListHeaderComponent aren't usable for a bit of time.
This period is like 500ms or less, but in the ListHeaderComponent I have some buttons / filters, and they are not clickable during this period.
And the problem is repeated each time the FlatList data is updated.
You can see my code (simplyfied) here:

export default function MyList({ navigation }) {
    const [myData, setMyData] = useState<ResponseType[]>([])

    // Socket Io
    const socket = io(SOCKET_URL, { forceNew: true, timeout: 5000 })

    useEffect(() => {
        socket.on("connect", () => {
            console.log("Connected to Socket ID : ", socket.id)
        })

        return () => {
            socket.disconnect()
            socket.close()
        }
    },[])

    socket.on("socketResponse", (data: ResponseType) => {
        setMyData(prevDate => [...prevDate, data])
    })

    const renderFilterItem = ({ item }: { item: Filter }) => <Text key={ item.id }>{ item.title }</Text>
    const renderListItem = ({ item }: { item: ResponseType }) => <Text key={ item.id }>{ item.id }</Text>

    const ListTop = () => (
        <>
            <TouchableOpacity onPress={() => navigation.navigate('HomePage')}>
                <Text>BACK CONTENT</Text>
            </TouchableOpacity>
            <FlatList
                horizontal
                showsHorizontalScrollIndicator={false}
                data={someFilters}
                keyExtractor={(item) => item.id}
                renderItem={renderFilterItem}
            />
        </>
    )

    return (
        <FlatList
            ListHeaderComponent={ListTop}
            data={myData}
            keyExtractor={(item) => item.id}
            renderItem={renderListItem}
            maxToRenderPerBatch={5}
            windowSize={2}
        />
    )
}

I don't know how to explain better my problem. But If I move the component of ListHeaderComponent above the FlatList, there is no more problem.
But If I do this, just the FlatList is scrollable, and I want all the page scrollable.
I can't wrap my Flatlist with a ScrollView because of this error: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

Has anyone faced this problem?

Thanks

Answer 1

try to use optimization for ListTop component as a possible problem here would be rendering of your functional component due to change of parent one.

here is the code sample.

import React, {useCallback} from 'react';

// your other codes
const ListTop = useCallback(() => (
        <>
            <TouchableOpacity onPress={() => navigation.navigate('HomePage')}>
                <Text>BACK CONTENT</Text>
            </TouchableOpacity>
            <FlatList
                horizontal
                showsHorizontalScrollIndicator={false}
                data={someFilters}
                keyExtractor={(item) => item.id}
                renderItem={renderFilterItem}
            />
        </>
    ), [someFilters]);

here the component will be memoized until there is no change in someFilters.