Use reactive var hook

docs/source/api/react/hooks.mdx

@@ -326,3 +326,38 @@ function useApolloClient(): ApolloClient<object> {}
 | Param                  | Type                       | Description                                                |
 | ---------------------- | -------------------------- | ---------------------------------------------------------- |
 | Apollo Client instance | ApolloClient&lt;object&gt; | The `ApolloClient` instance being used by the application. |
+
+
+##  useReactiveVar
+
+The `useReactiveVar` hook can be used to read from a reactive variable in a way that allows the React component to rerender if/when the variable is next updated.
+
+Previously, the only way for a reactive variable to trigger a React component rerender was through the use of `useQuery`. Now you don't have to be using `useQuery` to benefit from the reactivity that `ReactiveVar<T>` provides.
+
+### Example
+```tsx
+import { makeVar, useReactiveVar } from "@apollo/client";
+export const cartItemsVar = makeVar([]);
+
+export function Cart() {
+  const cartItems = useReactiveVar(cartItemsVar);
+  // ...
+```
+
+### Function Signature
+
+```tsx
+ function useReactiveVar<T>(rv: ReactiveVar<T>): T {
+  const value = rv();
+  // We don't actually care what useState thinks the value of the variable
+  // is, so we take only the update function from the returned array.
+  const mute = rv.onNextChange(useState(value)[1]);
+  // Once the component is unmounted, ignore future updates. Note that the
+  // useEffect function returns the mute function without calling it,
+  // allowing it to be called when the component unmounts. This is
+  // equivalent to useEffect(() => () => mute(), []), but shorter.
+  useEffect(() => mute, []);
+  return value;
+}
+
+```

docs/source/local-state/reactive-variables.mdx

@@ -19,7 +19,7 @@ import { makeVar } from '@apollo/client';
 const cartItemsVar = makeVar([]);
 ```
 
-This code creates a reactive variable with an empty array as its initial value. 
+This code creates a reactive variable with an empty array as its initial value.
 
 > **Important:** The return value of `makeVar` is a _function_ that you call to read or modify your reactive variable's value.
 
@@ -60,6 +60,23 @@ With the `useReactiveVar` hook, React components can also include reactive varia
 
 For more information, see [Storing local state in reactive variables](./managing-state-with-field-policies/#storing-local-state-in-reactive-variables).
 
+### useReactiveVar hook
+
+The `useReactiveVar` hook can be used to read from a reactive variable in a way that allows the React component to rerender if/when the variable is next updated.
+
+Previously, the only way for a reactive variable to trigger a React component rerender was through the use of `useQuery`. Now you don't have to be using `useQuery` to benefit from the reactivity that `ReactiveVar<T>` provides.
+
+```tsx
+import { makeVar, useReactiveVar } from "@apollo/client";
+export const cartItemsVar = makeVar([]);
+
+export function Cart() {
+  const cartItems = useReactiveVar(cartItemsVar);
+  // ...
+```
+
 ## Example application
 
 [This example to-do list application](https://github.com/apollographql/ac3-state-management-examples/tree/master/apollo-local-state) uses reactive variables to track both the current list of to-do items and the filter that determines which items to display. See [`cache.tsx`](https://github.com/apollographql/ac3-state-management-examples/blob/master/apollo-local-state/src/cache.tsx) in particular.
+
+