Use reactive var hook (apollographql#9906)

* emptye

* adding content on useReactiveVar

* added to react-hooks section

* resolved feedback

* fixed function signature

docs/source/api/react/hooks.mdx

@@ -326,3 +326,27 @@ 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 re-render 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 {}
+```

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,21 @@ 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 re-render if/when the variable is next updated.
+
+Previously, the only way for a reactive variable to trigger a React component re-render 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.
+[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.