Warning when a memoized component uses both hooks and suspense

[trojanowski]

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:

• it is memoized using React.memo
• it uses hooks
• it uses suspense (there is a promise thrown).

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

[gaearon]

My first read is this is a bug.

[muqg]

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 (
    ...
  )
}

[ex3ndr]

Can confirm this.

[gaearon]

Fixed in 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl