ApolloClient 3: Cannot update a component from inside the function body of a different component.

[Banou26]

related to apollographql/react-apollo#3863

Intended outcome:
useQuery should not throw unintentional state changes warning.

Actual outcome:

Error thrown:
Warning: Cannot update a component from inside the function body of a different component.

How to reproduce the issue:
probably the same as apollographql/react-apollo#3863 (comment)

Versions
"@apollo/client": "^3.0.0-beta.44"

[Tadimsky]

This is similar to the error I get - I believe it's just a different string in React 16.13.1:

Warning: Cannot update a component (Participants) while rendering a different component (HandRaiseItem). To locate the bad setState() call inside HandRaiseItem, follow the stack trace as described in https://fb.me/setstate-in-render

@hwillson any chance you could fix this here as well?

[hwillson]

Is this still an issue for people using the latest @apollo/client@beta (3.0.0-beta.50)?

[Banou26]

Currently on ^3.0.0-beta.48 and i don't have it anymore.

[fdev]

This issue was indeed fixed for me in beta.48, but seems to have returned in beta.52. @Banou26 can you check if the latest version produces the error for you again as well?

[Banou26]

Tried on ^3.0.0-beta.53 and it's not back.

[fdev]

For some reason npm install '@apollo/client@3.0.0-beta.52' kept installing version 3.0.0-james.33.0, which is why it was broken again for me. This no longer happens with 3.0.0-beta.53. Thanks for checking!

[coler-j]

I am getting this when using reactiveVars for pagination in a child component.

I am on @apollo/client@3.2.5

I have a reactiveVar:

// file: reactiveVars.ts
export const currentPageVar = makeVar<number>(1)
export const currentDataVar = makeVar<IDataInterface>()

A useQuery call in my root / parent component:

export default function App() {
  const { data } = useQuery(. .......... )
  currentDataVar(data)

  return (<>
     <SomeComponentToRenderData />  
     <SomeChildComponent />
   </>
  )
}

And in a child component when a button is pressed the reactive component is updated, which updates my query via a local client only field:

export default function SomeChildComponent() => {
    const currentPage = useReactiveVar(currentPageVar)

    return <Button onClick={() => currentPageVar(currentPage + 1)}
}

Then my data is updated via the other reactive var

export default function SomeComponentToRenderData() => {
    const currenData = useReactiveVar(currentDataVar)

    return <ul> ....  currentData  .....  </li>
}

This pattern for pagination (i.e. using reactive hooks + client schema fields) appears to cause this error to occur.

[AdrienLemaire]

@coler-j I've just encountered the same issue, and fixed it by adding the reactive var mutation in an effect.

In your case, that would be:

export default function App() {
  const { data } = useQuery(. .......... )
  useEffect(() => {
    currentDataVar(data);
  }, [data]);

  return (<>
     <SomeComponentToRenderData />  
     <SomeChildComponent />
   </>
  )
}

[asaadawey]

@coler-j
Same issue of you
did you got any solution ?

[coler-j]

@asaadawey I have not circled back but I anticipate that this #6188 (comment) comment should fix it. Although this is not in the docs, effects that impact state should typically be wrapped in useEffect

[asaadawey]

@coler-j
Thank you for replaying
actually i have got another solution
warpping the code with setTimeout

[Banou26]

Should i re-open this issue if it's still a problem?

[asaadawey]

@Banou26
i think yes

wrapping the apollo code inside a useEffect or setTimeout is not an efficient solution

[alexistbell]

Any update on this issue? Since I started using pagination I have run into this problem. I tried reworking to put the code in side of useEffect instead, but it doesn't seem to make a difference.

[dylanwulf]

@alexistbell I'm not sure if it's exactly the same issue, but I submitted this PR which might fix it: #9801. This change is available in version 3.7.0-beta.6 and newer.

[alexistbell]

Thanks @dylanwulf , that is making the error go away, which is helpful because it looks like I have a different issue I need to track down that isn't related, so now I can focus on that.