Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useReactiveVar does not cause re-render

See original GitHub issue

When using wrappers around useReactiveVar, it doesn’t cause re-renders when the value changes.

Here is an example: https://codesandbox.io/s/use-reactive-var-bug-g1chn

That is the minimal reproducible code. We have a monorepo with a data package, which is basically a wrapper around Apollo, that’s exactly what that Apollo.tsx tries to replicate.

Issue Analytics

State:
Created 3 years ago
Comments:9 (6 by maintainers)

Top GitHub Comments

3reactions

manzoorwanijkcommented, Feb 5, 2021

@benjamn Yes, I can confirm the bug is fixed. Here is the updated sandbox. https://codesandbox.io/s/use-reactive-var-bug-forked-ybsw8

Thanks

2reactions

manzoorwanijkcommented, Feb 5, 2021

Here is an updated sandbox which is very close to our implementation.

https://codesandbox.io/s/use-reactive-var-bug-forked-q786o

You can check in the console that the value of the reactive variable has changed, but it doesn’t cause re-render.

Top Results From Across the Web

The state of useReactiveVar tutorials is poor - Apollo GraphQL

The cause of my problems came from useReactiveVar not triggering a re-render. This solution helped: spread the variable to a new object so...

Apollo Client Reactive variables - not trigger re render after ...

Update: From Apollo Client 3.2.0 you can use the useReactiveVar hook to get the data (File B): import { useReactiveVar } from ...

How to use Apollo Client useReactiveVar - Vue Forum

How to use Apollo Client useReactiveVar ... in the example above, future variable updates do not cause the Cart component to rerender.

How to stop re-rendering lists in React? - Alex Sidorenko

There is a common misconception that a React component will not re-render unless one of its properties changes. This is not true:.

[Solved]-useQuery doesn't fire on rerender-Reactjs

useEffect(() => { if (movies) { console.log('movieVar: ', movieVar()); movies = [...movies, movieVar()]; } refetch(); }, [useReactiveVar(movieVar)]);.