React Query's select option enables fine-grained subscriptions by allowing components to subscribe only to specific parts of query data rather than the entire response. This prevents unnecessary re-renders when unrelated data changes. The feature supports structural sharing for referential stability and can be optimized further using useCallback for stable function references and external memoization libraries like fast-memoize to prevent expensive transformations from running multiple times across different QueryObservers. TypeScript support requires careful handling of generic type parameters to maintain type safety while allowing flexible selector abstractions.

10m read timeFrom tkdodo.eu
Post cover image
Table of contents
Global State and SubscriptionsThe QueryHashFine-grained SubscriptionsWhat is select ?Typing Select AbstractionsSupercharging select with MemoizationThe Final Boss
3 Comments

Sort: