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
- run react-refresh-webpack-plugin/examples/webpack-dev-server
- useRequest in examples/webpack-dev-server/src/FunctionNamed.js
- 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)
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 没有碰到这个问题