可以有条件地渲染多个 InfiniteLoader 组件吗？

Question

该应用程序具有选项卡，用于选择要查看的帖子列表。 有条件地渲染多个 InfiniteLoader 组件是否可行？还是性能成本太大？我应该只有一个 InfiniteLoader 组件并在适当的列表中输入吗？ InfiniteList 只是对 InfiniteLoader 的智能包装。

const renderContent = () => {
    switch (tab) {
      case "posts":
        return (
          <InfiniteList
            getDataFromServer={(startIndex, stopIndex) =>
              fetchPostsByUsername({
                username: query.username,
                userId: user.id,
                startIndex,
                stopIndex,
              })
            }
            list={posts}
            updateList={(posts) => setPosts(posts)}
            infiniteLoaderRef={postsLoaderRef}
            empty={renderEmpty()}
          >
            <Post user={user} />
          </InfiniteList>
        );

      case "media":
        return (
          <InfiniteList
            getDataFromServer={(startIndex, stopIndex) =>
              fetchMediaPostsByUsername({
                username: query.username,
                userId: user.id,
                startIndex,
                stopIndex,
              })
            }
            list={mediaPosts}
            updateList={(mediaPosts) => setMediaPosts(mediaPosts)}
            infiniteLoaderRef={mediaPostsLoaderRef}
            empty={renderEmpty()}
          >
            <Post user={user} />
          </InfiniteList>
        );

      case "likes":
        return (
          <InfiniteList
            getDataFromServer={(startIndex, stopIndex) =>
              fetchLikedPostsByUsername({
                username: query.username,
                userId: user.id,
                startIndex,
                stopIndex,
              })
            }
            list={likedPosts}
            updateList={(likedPosts) => setLikedPosts(likedPosts)}
            infiniteLoaderRef={likedPostsLoaderRef}
            empty={renderEmpty()}
          >
            <Post user={user} />
          </InfiniteList>
        );

      default:
        return null;
    }
};