React列表渲染与搜索筛选功能实现问题求助

大家好，我最近在开发React新闻列表组件时遇到了两个头疼的问题，想请教下社区的大佬们：

• 我写的加载状态条件渲染没有生效，isLoading状态变化时，加载提示没按预期显示/隐藏
• 列表组件一直在重复渲染，性能受到了影响

以下是我的核心代码（为了隐私已经移除了敏感URL）：

{isLoading && <div>Loading...</div>}{" "}

{news.map((item: Iitem, id) => {
  return (
    <Box mt={"20px"} key={id}>
      <NewsCard
        title={item.headline}
        description={item.description}
        url={item.url}
        image={item.promoImage.url}
        author={item.authorFormatted}
        date={item.shortDateLastPublished}
        tag={item.section.tagName}
      />
    </Box>
  );
})}

我尝试通过isLoading来控制加载状态的显示，但不管状态怎么变，加载提示都没正确触发；同时列表部分毫无缘由地反复渲染，我排查了半天也没找到问题所在。有没有人能帮我分析下可能的原因，或者给点调试建议呀？

备注：内容来源于stack exchange，提问作者owis qari