hooks: Bug: The loading state of useRequest is incorrect with react-refresh

React version: 16.13.1 react-refresh version: 0.8.1 react-refresh-webpack-plugin version: 0.3.0-beta.6 umi/hooks version: 1.9.2

Steps To Reproduce

  1. run react-refresh-webpack-plugin/examples/webpack-dev-server
  2. useRequest in examples/webpack-dev-server/src/FunctionNamed.js
  3. try hmr

Link to code example:

import React from 'react';
import { useRequest } from '@umijs/hooks';

function getUsername() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('test');
    }, 1000);
  });
}

export function FunctionNamed() {
  const { data, loading } = useRequest(getUsername)
  console.log('x', loading);
  return <h1>
    {loading ? 'loading' : data}
  </h1>;
}

The current behavior

The result of loading will always be true when hmr.

The expected behavior

The result of loading should be the right value.

The bug reason

The state of Function component is preserved, but effects re-run in React Refresh. For Detail.

A suggestion for code shown as below :

refresh() {
    if (this.unmountedFlag) this.unmountedFlag = false;
    return this.run(...this.state.params);
}

Thanks for your help.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 5
  • Comments: 16 (1 by maintainers)

Most upvoted comments

It’s not a bug in React. It’s intentional that useEffect will cleanup and re-setup during Fast Refresh: https://github.com/facebook/react/issues/21019#issuecomment-800650091. The fix is to write effects in a more resilient way, which would be important for other features (not just Fast Refresh) in the future. Happy to answer other questions in the linked issue if you’re struggling with some concrete pattern.

@brickspert 这个怎么 close 了呢?是否可以参考 react-query 是怎么处理的?我用 react-query 没有碰到这个问题