You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.4 KiB
33 lines
1.4 KiB
import * as React from "rehackt"; |
|
import { useSyncExternalStore } from "./useSyncExternalStore.js"; |
|
/** |
|
* Reads the value of a [reactive variable](https://www.apollographql.com/docs/react/local-state/reactive-variables/) and re-renders the containing component whenever that variable's value changes. This enables a reactive variable to trigger changes _without_ relying on the `useQuery` hook. |
|
* |
|
* @example |
|
* ```jsx |
|
* import { makeVar, useReactiveVar } from "@apollo/client"; |
|
* export const cartItemsVar = makeVar([]); |
|
* |
|
* export function Cart() { |
|
* const cartItems = useReactiveVar(cartItemsVar); |
|
* // ... |
|
* } |
|
* ``` |
|
* @since 3.2.0 |
|
* @param rv - A reactive variable. |
|
* @returns The current value of the reactive variable. |
|
*/ |
|
export function useReactiveVar(rv) { |
|
return useSyncExternalStore(React.useCallback(function (update) { |
|
// By reusing the same onNext function in the nested call to |
|
// rv.onNextChange(onNext), we can keep using the initial clean-up function |
|
// returned by rv.onNextChange(function onNext(v){...}), without having to |
|
// register the new clean-up function (returned by the nested |
|
// rv.onNextChange(onNext)) with yet another callback. |
|
return rv.onNextChange(function onNext() { |
|
update(); |
|
rv.onNextChange(onNext); |
|
}); |
|
}, [rv]), rv, rv); |
|
} |
|
//# sourceMappingURL=useReactiveVar.js.map
|