Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning when a memoized component uses both hooks and suspense #14790

Closed
trojanowski opened this issue Feb 7, 2019 · 4 comments
Closed

Warning when a memoized component uses both hooks and suspense #14790

trojanowski opened this issue Feb 7, 2019 · 4 comments

Comments

@trojanowski
Copy link

@trojanowski trojanowski commented Feb 7, 2019

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
Copy link
Member

@gaearon gaearon commented Feb 8, 2019

My first read is this is a bug.

@muqg
Copy link

@muqg muqg commented Feb 9, 2019

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
Copy link

@ex3ndr ex3ndr commented Feb 12, 2019

Can confirm this.

@gaearon
Copy link
Member

@gaearon gaearon commented Feb 14, 2019

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

@gaearon gaearon closed this Feb 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants