React: Warning when a memoized component uses both hooks and suspense

Created on 7 Feb 2019  ·  4Comments  ·  Source: facebook/react

Do you want to request a feature or report a 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 ( or CodeSandbox ( example below:

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

Hooks Bug

Most helpful comment

All 4 comments

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

  // Promise is thrown somewhere after these two
  // hooks on top, but before the return statement.
  return (

Can confirm this.

Was this page helpful?
0 / 5 - 0 ratings