Documentation

useQuerySelect

stable

Hook that returns QueryState with optimized re-renders

A hook that returns the full QueryState object but with optimized re-renders based on which properties of the state are actually used in the component.

React HookPerformance

State-Based Optimization

useQuerySelect returns the full QueryState object but only re-renders when the specific state properties you access change.

Signature

function useQuerySelect<TData, TError = Error>(
  queryKey: QueryKey,
  options?: QueryOptions<TData>
): QueryState<TData, TError>

Parameters

queryKey

QueryKeyRequired

Unique identifier for the query. Can be a string or array of primitives.

options

QueryOptions<TData>

Optional configuration object. If no fetcher is provided, uses a previously registered fetcher.

Returns

Returns

QueryState<TData, TError>

The complete query state object with optimized re-renders based on property usage

Examples

Basic Usage

Access query state with optimized re-renders

import { useQuerySelect } from 'qortex-react';


function UserName({ userId }: { userId: string }) {
  const userState = useQuerySelect(['user', userId], {
    fetcher: async () => {
      const response = await fetch(`/api/users/${userId}`);
      return response.json();
    }
  });


  // Only re-renders when userState.data changes, not when other state properties change
  return <span>{userState.data?.name ?? 'Unknown'}</span>;
}

State Property Access

Access specific state properties with optimized re-renders

import { useQuerySelect } from 'qortex-react';


function ProductStats({ productId }: { productId: string }) {
  const productState = useQuerySelect(['product', productId], {
    fetcher: async () => {
      const response = await fetch(`/api/products/${productId}`);
      return response.json();
    }
  });


  // Component only re-renders when accessed state properties change
  return (
    <div>
      <h3>{productState.data?.name ?? 'Unknown Product'}</h3>
      <p>Price: ${productState.data?.price ?? 0}</p>
      <p>In Stock: {(productState.data?.inventory ?? 0) > 0 ? 'Yes' : 'No'}</p>
      {productState.isLoading && <div>Loading...</div>}
      {productState.isError && <div>Error: {productState.error?.message}</div>}
    </div>
  );
}

Behavior

State-Based Optimization

Returns full QueryState but only re-renders when accessed state properties change

Performance Optimized

Automatically optimizes re-renders based on which state properties are used

Full State Access

Provides access to all QueryState properties (data, isLoading, error, etc.)

Type Safe

Full TypeScript support with proper type inference

Best Practices

Do's

  • ✓Use for accessing specific state properties with optimization
  • ✓Access only the state properties you need in your component
  • ✓Use TypeScript for better type safety
  • ✓Handle all state properties appropriately (data, isLoading, error, etc.)

Don'ts

  • ✗Don't use for simple data access (use useQueryData instead)
  • ✗Don't access all state properties if you only need a few
  • ✗Don't forget to handle loading and error states
  • ✗Don't use for complex data transformations

Related Pages

useQueryuseQueryDataQueryOptions