CODEWITHSUNDEEP
react-nativereact-native-flatlistflatlist
red
red

Reputation: 1629

React native flatlist rerender

I'm working on a flatlist that has complex child that cause expensive rerender, I need to optimize that but I'm not able to stop the rerendering with useMemo, please help me to go through this.

Here my list code:

          <FlatList
            data={thePosts}
            extraData={thePosts}
            keyExtractor={(item, index) => index.toString()}
            removeClippedSubviews={true}
            maxToRenderPerBatch={5}
            updateCellsBatchingPeriod={30}
            initialNumToRender={11}
            windowSize={5}
            refreshing={isRefreshing}
            onRefresh={handleOnRefresh}
            onEndReached={isLoading ? () => null : () => getPosts("more")}
            onEndReachedThreshold={0.1}
            renderItem={memoizedPost}
            //renderItem={renderThePost}
            ItemSeparatorComponent={renderThePostSep}
            ListFooterComponent={renderThePostListFooter}
          />

here the renderPost:

  const renderThePost = (props) => {
    let post = props.item;

    if (post[0].type == "share") {
      return (
        <TheSharedPost thePost={post} />
      );
    } else {
      return <ThePost thePost={post} />;
    }
  };

I've tried to use memoization like this:

  const memoizedPost = useMemo(() => renderThePost, []);

Now the problem is, the empty array as useMemo argument I think that only accept the first render but not working, I've tried to use [item.someProperty] but I'm not able to recognize item in the argument (item is not defined)

I've also used useCallback but still no luck, a lot o rerendering happen. Please help me to fix this. Tnz

Upvotes: 1

Views: 297

Answers (1)

Mehran Khan
Mehran Khan

Reputation: 3636

you can use React.memo to avoid rendering of flatlist items

function TheSharedPost(props) {
  /* render using props */
}

export default React.memo(TheSharedPost);

function ThePost(props) {
  /* render using props */
}

export default React.memo(ThePost);

Upvotes: 1

Related Questions