How to get the most out of select, sprinkled with some TypeScript tips.

TK Dodo is a platform dedicated to sharing insights and resources on software development, technology trends, and career growth. Through articles, interviews, and community engagement, TK Dodo empowers developers to navigate their career paths, stay updated with industry advancements, and cultivate  skills for personal and professional development.

TkDodo

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.

React Query Selectors, Supercharged

<p>As alternative the Tanstack is also super-powerful</p>


<p>Fantastic write-up! The “supercharged” selectors in React Query offer a powerful way to minimize unnecessary re‐renders by subscribing only to derived data slices-perfect for optimizing performance in complex UIs. Loved how you underscored that selectors shine best in large-scale apps rather than small prototypes - such practical advice. A live code sandbox or before-and-after benchmarks would make it even more compelling. Great insights as always, thanks for sharing!</p>
