Enabling Tracked Queries in React Query for Performance Gains

Showcases how to enable tracked queries using TanStack Config to only re-render components when the data they consume has changed, enhancing performance.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

First, import necessary components and functions from React, ReactDOM, and @tanstack/react-query, along with the App component.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      notifyOnChangeProps: 'tracked',
    },
  },
});

Create a new instance of QueryClient. Configure it to use tracked queries for optimizing re-renders. This makes components only re-render when the data they rely on changes.

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Bind our application with the QueryClientProvider and pass the configured queryClient instance. This step enables the entire application to benefit from tracked queries performance optimization.