Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6312

How can a SectionList / FlatList renderItem and renderSectionItem layout event be used to memoize getItemLayout?

$
0
0

One of the optimizations for FlatList/SectionList is to use the getItemLayout but with varying content this becomes difficult to compute a priori. However, I was wondering can we at least capture the onLayout event when the item is rendered and put it in a useRef<{length:number, offset:number, index:number}[]>

I think FlatList won't be as hard, but SectionList would be difficulty knowing what section is presently being rendered.

So if I look at FlatList I was thinking about something like this for FlatList

const layouts = useRef<{length:number, offset:number, index:number}[]>([]);const onLayoutFor = useCallback((index:number)=>{return ({nativeEvent}) => {  layouts[index] = { index, offset: y, length: height }};},[data]);const renderItem = useCallback(({item, data, index}) => (<View onLayout={onLayoutFor(index)}>...</View>));const getItemLayout = useCallback((data, index) => layout[index], [data]);return <FlatList data={data}   renderItem={renderItem}  getItemLayout={getItemLayout }  />

For section list I am not quite sure anymore.


Viewing all articles
Browse latest Browse all 6312

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>