希望在第一次渲染时设置一次状态，而不会在进一步更新时导致不必要的重新渲染答案

【问题标题】：Want to set state once on first render without causing uneccessary re-renders on further updates希望在第一次渲染时设置一次状态，而不会在进一步更新时导致不必要的重新渲染
【发布时间】：2020-05-28 13:05:01
【问题描述】：

我有一个MarketOverview 组件，它呈现了一堆加密货币交易对市场。在初始化时，我希望它默认呈现BTC/USD 市场，我正在通过useEffect() 执行此操作。问题是每次渲染都会调用defaultMarket。此外，defaultMarket 依赖于 tickers 属性，所以如果我将它包装在 useMemo() 中，那么 eslint react-hooks 插件会自动填充 tickers 作为依赖项。

没有useMemo()：

const defaultMarket = tickers.find((ticker) => {
    return ticker.market_id === "BTC-USD";
  });

与useMemo():

const defaultMarket = useMemo(
    () =>
      tickers.find((ticker) => {
        return ticker.market_id === "BTC-USD";
      }),
    [tickers]
  );

整个组件：

export const MarketOverview = memo(({ tickers }: TProps) => {

  // Set default market on initialisation to BTC/USD
  const defaultMarket = tickers.find((ticker) => {
    return ticker.market_id === "BTC-USD";
  });

  const [selectedMarket, setSelectedMarket] = useState<ITicker | undefined>(
    undefined
  );

  useEffect(() => {
    setSelectedMarket(defaultMarket);
  }, [defaultMarket]);

  // Select market
  const selectMarket = (market: ITicker) => {
    history.push(`${PUBLIC_URL}/markets/${market.market_id}`);
    setSelectedMarket(market);
  };
  return (
    <div className="market-overview-container">
      <MarketSelector
        tickers={tickers}
        selectMarket={selectMarket}
        selectedMarket={selectedMarket}
      />
      {selectedMarket && <MarketStats selectedMarket={selectedMarket} />}
    </div>
  );
});

【问题讨论】：

标签： reactjs react-hooks react-usememo

【解决方案1】：

为什么，如果 tickers 不断更新，您将永远不会重新计算 defaultMarket。

如果你真的想要，你可以为该行添加一个 eslint 禁用并使用一个空的依赖数组，这样钩子只在组件挂载时运行一次。

const defaultMarket = useMemo(
  () =>
    tickers.find((ticker) => {
      return ticker.market_id === "BTC-USD";
    }),
  // eslint-disable-next-line react-hooks/exhaustive-deps
  []
);

【讨论】：