React: Aviso quando um componente memoized usa ganchos e suspense

Criado em 7 fev. 2019 · 4Comentários · Fonte: facebook/react

Você quer solicitar um recurso ou relatar um bug ?

Erro

Qual é o comportamento atual?

Há um aviso mostrado no console para um componente que possui todas as seguintes condições atendidas:

é memorizado usando React.memo
usa ganchos
usa suspense (há uma promessa lançada).

Texto desse aviso: Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

Se o comportamento atual for um bug, forneça as etapas para reproduzir e, se possível, uma demonstração mínima do problema. Cole o link para o seu exemplo JSFiddle (https://jsfiddle.net/Luktwrdm/) ou CodeSandbox (https://codesandbox.io/s/new) abaixo:

https://codesandbox.io/s/71lr16j491

Qual é o comportamento esperado?

Nenhum aviso deve ser mostrado porque as regras dos ganchos foram atendidas. Além disso, o comportamento deve ser consistente, não importa se React.memo é usado ou não.

Quais versões do React e quais navegadores / sistemas operacionais são afetados por esse problema?

Reagir 16.8.1

Hooks Bug

Fonte

trojanowski

👍3

Comentários muito úteis

Corrigido em 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl

gaearon em 14 fev. 2019

👍2

Todos 4 comentários

Minha primeira leitura é que isso é um bug.

gaearon em 8 fev. 2019

Notei esse mesmo problema na versão 16.8.1 . No entanto, no meu caso, não há nenhum componente memorizado entre o local onde Promise é lançado e o componente Suspense .

O componente declara dois ganchos no topo, antes que Promise seja lançado e o aviso apareça. Mudei a chamada jogando Promise por cima, antes dos ganchos e a mesma coisa acontecer. O aviso desaparece se não houver Promise lançado dentro do componente.

Uma simulação do meu componente é algo como:

function Component(props) {
  const [state, setState] = useState()
  useEffect(...)

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