Use with React 16.8.0

[JClackett]

Been using this library for a while now and it's been perfect 👌

I just upgraded to the latest stable release of React 16.8.0 and then my console was full of errors saying:

Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

After debugging i found it only happens when the component is wrapped in a memo()

Not sure where the issue should be posted though?

[ncphillips]

We ran into this issue as well. Since hooks are tied into the lifecycle of a component. React doesn't like it if you exit the render function before all hooks are called.

function Foo () {
  const query = useSomeQuery()
  if (query.loading) return <Loading />
  if (query.errors ) return <Errors />

  // This will cause problems.
  let [bar, setBar] = useState()

  return <View bar={bar} setBar={setBar} data={query.data} />
}

Make sure all hooks are called before any early returns.

function Foo () {
  let [bar, setBar] = useState()

  const query = useSomeQuery()
  if (query.loading) return <Loading />
  if (query.errors ) return <Errors />

  return <View bar={bar} setBar={setBar} data={query.data} />
}

[trojanowski]

@JClackett could you please try to provide a reproduction on https://codesandbox.io?

[JClackett]

@ncphillips Thanks! I checked and all my hooks are at the top of the function body above any returns 🤷‍♂️

@trojanowski I'm finding it hard to set up a codesandbox with a dummy graphql api, any suggestions?

One more thing i noticed is that when I am wrapping a component using memo() in a component, and using useQuery with suspend: true, that's when i get the errors, setting suspend: false removes all error.

function Child() {
  const { data, error } = useQuery(GET_THING) // suspend: true
  return (
    <div>hello</div>
  )
}

export default memo(Child)

and the parent

function Parent() {
	return (
      <Suspense fallback="loading...">
		    <Child />
      </Suspense>
  )
}

This gives the errors, however when setting suspend = false, then it's fine, am i missing something with memo/hooks/react-apollo-hooks?

[robertvansteen]

I got similar errors, in my case, it was because I was lazy loading the component with the useQuery hook with React.lazy. Looks like they don't play well together yet.

[trojanowski]

@JClackett @rovansteen it seems it's an issue with React: facebook/react#14790

[JClackett]

thanks @trojanowski, am happy to close this issue then, and wait on the react issue to be resolved

[hronro]

I have the same problem with React v16.8.3, the issue happens when I call useState or useCallback after calling useQuery.

[trojanowski]

@foisonocean Could you please provide a reproduction on https://codesandbox.io? As a source you can use https://www.graphqlhub.com (GraphQL API url: https://www.graphqlhub.com/graphql, example query here).