add-hook

Create a reusable React data-fetching hook by using useContext for the FunctionSpaceContext, useMemo for stable cache keys, useCallback for the core function with AbortSignal, and useCacheSubscription to sync data with the cache.

The best way to structure a React hook for market data queries is to follow a canonical pattern that wraps requests in useCallback for deterministic fetching and uses useCacheSubscription to keep the queried data synchronized with the cache.

useCacheSubscription works by subscribing the React data-fetching hook to the query cache, ensuring the component re-renders with fresh data automatically whenever the cached market data updates.

Yes, you can wrap the core data-fetching function in useCallback and pass an AbortSignal to enable request cancellation, which ensures clean error handling and prevents state updates on unmounted components.

Yes, the hook relies on FunctionSpaceContext to access the API client and workspace state, meaning the React component must be wrapped in the appropriate context provider before it can successfully fetch market data.

The limitation of using useMemo for cache keys is that the key generation depends on stable dependency arrays; if the hook's input parameters are not referentially stable, the memoized key can change unnecessarily and trigger redundant cache subscriptions.