使用react-hot-loader时如何避免通过API调用重新运行useEffect？

Question

我正在react-hot-loader本地环境中使用它来开发我的 React + Firebase 应用程序。

对于没有 API 调用的基本组件，我可以立即看到更改（它只更新更改的部分）。但是，当我设计一个在内部具有 API 调用的组件（useEffect如下例所示）时，它会不断重新运行所有内容（包括效果），并且我会丢失当前状态。

我更改某些内容后的日志：

我不确定问题是否是由于useEffectAPI 调用引起的。

问题

我怎样才能解决这个问题？就像，如果我更改标签的 CSS 颜色，我希望所有状态保持不变并仅更新更改的部分。

例子：

ComponentWithApiCall.js

function ComponentWithAPICall() {

  const [loading,setLoading] = useState(true);
  const [dataFromAPI,setDataFromAPI] = useState(null);

  useEffect(()=>{

    // CALL API WAIT FOR RESULTS
    setDataFromAPI(result);
    setLoading(false);

  },[]);

  return(
    dataFromAPI &&
      <div>
        // WHATEVER
      </div>
  );
}

这是我当前的配置react-hot-loader。我也在使用webpack和webpack-dev-server。

webpack.dev.js

  devServer: {
    contentBase: './public',
    compress: true,
    hot: true,
    historyApiFallback: true
  },

  plugins:[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.HashedModuleIdsPlugin()
  ],

  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  }

应用程序.js

import { hot } from 'react-hot-loader/root';

// App component

export default hot(withRouter(App));    // I'M ALSO USING react-router