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

Question

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

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

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

我不确定问题是由于useEffect还是API调用引起的。

问题

我该如何解决？就像，如果我更改标签的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'
    }
  }

App.js

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

// App component

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