我有一个MarketList组件获取市场ID，还有一个MarketCard组件根据ID获取给定市场的信息。因为我希望市场可以通过信息过滤，所以我将市场信息保存在MarketList组件中。但是，这会导致n^2次重新渲染。
市场列表

type Market = {
  id: string;
};

type MarketInfo = {
  [key: string]: { title: 'title'; description: 'description' };
};

const MarketList = () => {
  const [markets, setMarkets] = useState<Market[]>([]);
  const [marketsInfo, setMarketsInfo] = useState<MarketInfo>({});

  useEffect(() => {
    const fetchedMarkets = getMarkets();
    setMarkets(fetchedMarkets);
  }, []);

  return (
    <div>
      {markets.map((market) => (
        <MarketCard
          key={market.id}
          market={market}
          marketInfo={marketsInfo[market.id]}
          updateMarketInfo={(info) =>
            setMarketsInfo((prevState) => ({ ...prevState, [market.id]: info }))
          }
        />
      ))}
    </div>
  );
};

市场卡

const MarketCard = (market, marketInfo, updateMarketInfo) => {
  console.log('MARKET CARD');
  useEffect(() => {
    if (marketInfo) {
      return;
    }
    const fetchedMarketInfo = getMarketInfo(market.id);
    updateMarketInfo(fetchedMarketInfo);
  }, [marketInfo]);
  return <div>{marketInfo.title}</div>;
};

异步网络请求本身是接近即时的。我希望一个卡组件不被重新呈现，如果marketInfo为一个给定的卡存在。
控制台屏幕截图：