Performance Tips

Optimize your qortex usage for maximum performance. Best practices for caching, bundle size, and efficient data fetching.

Performance Optimization Tips

Optimize Bundle Size

Keep your bundle size minimal by importing only what you need

// ✅ Good - Import only what you need
import { useQuery, registerFetcher } from "qortex-react";

// ❌ Avoid - Don't import everything
import * as qortex from "qortex-react";

Use Appropriate Stale Times

Set stale times based on your data characteristics

// Short-lived data (real-time)
registerFetcher(["live-data"], {
  fetcher: fetchLiveData,
  staleTime: 0 // Always stale
});

// Long-lived data (user profiles)
registerFetcher(["user-profile"], {
  fetcher: fetchUserProfile,
  staleTime: 5 * 60 * 1000 // 5 minutes
});

// Static data (configuration)
registerFetcher(["config"], {
  fetcher: fetchConfig,
  staleTime: 30 * 60 * 1000 // 30 minutes
});

Batch Related Queries

Fetch related data in parallel for better performance

function Dashboard() {
  // These will be fetched in parallel
  const { data: user } = useQuery(["user"]);
  const { data: posts } = useQuery(["posts"]);
  const { data: comments } = useQuery(["comments"]);

  return (
    <div>
      <UserProfile user={user} />
      <PostsList posts={posts} />
      <CommentsList comments={comments} />
    </div>
  );
}

Use Placeholder Data

Provide meaningful placeholder data to prevent layout shifts

// Provide placeholder data for better UX
registerFetcher(["todos"], {
  fetcher: fetchTodos,
  placeholderData: [] // Empty array while loading
});

registerFetcher(["user"], {
  fetcher: fetchUser,
  placeholderData: {
    name: "Loading...",
    avatar: "/default-avatar.png"
  }
});

Optimization Strategies

Caching

  • Set appropriate stale times based on data freshness requirements
  • Use placeholder data to prevent loading states
  • Enable previous data on error for better UX
  • Configure equality functions for complex data structures

Network

  • Batch related API calls when possible
  • Use request deduplication to prevent duplicate calls
  • Implement proper error handling and retry logic
  • Consider using background refetching for non-critical data

Bundle Size

  • Import only the functions you need
  • Use tree-shaking friendly imports
  • Avoid importing the entire library
  • Consider code splitting for large applications

Memory

  • Clear unused queries when components unmount
  • Use appropriate cache sizes for your use case
  • Monitor memory usage in development
  • Implement proper cleanup in useEffect hooks

Performance Metrics

< 2KB

Bundle Size

Total gzipped size including qortex-core and qortex-react

< 100ms

First Load

Time to first query execution

> 90%

Cache Hit Rate

Percentage of requests served from cache

< 1MB

Memory Usage

Typical memory footprint for 100 queries

Best Practices

✅ Do

  • • Set appropriate stale times for your data
  • • Use placeholder data to prevent layout shifts
  • • Batch related queries when possible
  • • Import only what you need
  • • Monitor performance in development
  • • Use background refetching for non-critical data

❌ Don't

  • • Set stale time too low for static data
  • • Import the entire library unnecessarily
  • • Ignore memory usage in large applications
  • • Fetch data sequentially when parallel is possible
  • • Forget to provide placeholder data
  • • Over-fetch data that won't be used

Ready to Optimize?

Now that you understand performance optimization, explore more advanced features and configuration options.

Configuration GuideError HandlingAPI Reference