Do you want to request a feature or report a bug?
Bug
What is the current behavior?
There is a warning shown in the console for a component which has all the following conditions met:
React.memo
Text of that warning: Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
https://codesandbox.io/s/71lr16j491
What is the expected behavior?
No warning should be shown because the rules of hooks are met. Also, the behavior should be consistent no matter if React.memo
is used or not.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.8.1
My first read is this is a bug.
I noticed this very same issue in version 16.8.1
. However in my case there is no memoized component between the place where a Promise
is thrown and the Suspense
component.
The component declares two hooks on top, before the Promise
is thrown and the warning appears. I moved the call throwing the Promise
on top, before the hooks and the same thing happens. Warning disappears if there is no Promise
thrown within the component.
A mock of my component is something like:
function Component(props) {
const [state, setState] = useState()
useEffect(...)
// Promise is thrown somewhere after these two
// hooks on top, but before the return statement.
return (
...
)
}
Can confirm this.
Fixed in 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl
Most helpful comment
Fixed in 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl