Performance

Performance Optimization

This guide covers performance optimization strategies for the Privacy Boost TypeScript SDK.

WASM Loading

Lazy Loading

The WASM module is large. Load it only when needed:

// Don't import at top level in routes that don't need it
// Instead, dynamically import when needed

async function initPrivacy() {
  const { PrivacyBoost } = await import('@testinprod-io/privacy-boost');
  return await PrivacyBoost.create(config);
}

Preloading

For routes that will need the SDK, preload in the background:

// In your app initialization
function preloadSDK() {
  // Preload WASM in background
  import('@testinprod-io/privacy-boost').then(({ loadWasm }) => {
    loadWasm().catch(() => {
      // Ignore preload errors
    });
  });
}

// Call early in your app
useEffect(() => {
  preloadSDK();
}, []);

Code Splitting

Use route-based code splitting:

// React Router example
const PrivacyWallet = React.lazy(() => import('./PrivacyWallet'));

function App() {
  return (
    <Routes>
      <Route path="/wallet" element={
        <Suspense fallback={<Loading />}>
          <PrivacyWallet />
        </Suspense>
      } />
    </Routes>
  );
}

Balance Caching

Local Cache

The SDK caches balances automatically. Control cache behavior:

// Get cached balance (fast)
const cachedBalance = useBalanceStore.getState().balances.get(tokenAddress);

// Force refresh from indexer (slow)
await sdk.vault.syncBalance(tokenAddress);
const freshBalance = await sdk.vault.getBalance(tokenAddress);

Smart Refresh

Only refresh when needed:

const CACHE_DURATION = 30000; // 30 seconds

function useBalance(tokenAddress: string) {
  const [balance, setBalance] = useState<bigint>(0n);
  const lastFetch = useRef<number>(0);

  const refresh = useCallback(async () => {
    const now = Date.now();
    if (now - lastFetch.current < CACHE_DURATION) {
      return; // Use cached
    }

    await sdk.vault.syncBalance(tokenAddress);
    setBalance(await sdk.vault.getBalance(tokenAddress));
    lastFetch.current = now;
  }, [tokenAddress]);

  return { balance, refresh };
}

Batch Operations

Sync all balances at once instead of individually:

// SLOW - Multiple requests
for (const token of tokens) {
  await sdk.vault.syncBalance(token);
}

// FAST - Single batch request
await sdk.vault.syncAllBalances();

Network Optimization

Request Debouncing

import { debounce } from 'lodash';

const debouncedSearch = useMemo(
  () => debounce(async (query: string) => {
    const result = await sdk.vault.searchAddress(query);
    setSearchResult(result);
  }, 300),
  []
);

function AddressSearch() {
  return (
    <input
      type="text"
      onChange={(e) => debouncedSearch(e.target.value)}
      placeholder="Search address..."
    />
  );
}

Request Deduplication

const pendingRequests = new Map<string, Promise<unknown>>();

async function deduplicatedRequest<T>(
  key: string,
  request: () => Promise<T>
): Promise<T> {
  if (pendingRequests.has(key)) {
    return pendingRequests.get(key) as Promise<T>;
  }

  const promise = request().finally(() => {
    pendingRequests.delete(key);
  });

  pendingRequests.set(key, promise);
  return promise;
}

// Usage
const balance = await deduplicatedRequest(
  `balance:${tokenAddress}`,
  () => sdk.vault.getBalance(tokenAddress)
);

Parallel Requests

// SLOW - Sequential
const balance1 = await sdk.vault.getBalance(token1);
const balance2 = await sdk.vault.getBalance(token2);
const balance3 = await sdk.vault.getBalance(token3);

// FAST - Parallel
const [balance1, balance2, balance3] = await Promise.all([
  sdk.vault.getBalance(token1),
  sdk.vault.getBalance(token2),
  sdk.vault.getBalance(token3),
]);

Memory Management

Cleanup Subscriptions

useEffect(() => {
  const unsubscribe = useBalanceStore.subscribe((state) => {
    // Handle changes
  });

  return () => unsubscribe(); // Important!
}, []);

Clear Unused Data

// Clear balances when clearing session
async function clearSession() {
  await sdk.auth.clearSession();
  useBalanceStore.getState().clearBalances();
  useTransactionStore.getState().clearTransactions();
}

Limit History Size

// Fetch only what you need
const recentTxs = await sdk.transactions.fetchHistory({
  limit: 20, // Don't fetch everything
});

Bundle Size

Tree Shaking

Import only what you need:

// BAD - Imports entire package
import * as SDK from '@testinprod-io/privacy-boost';

// GOOD - Tree-shakeable imports
import { PrivacyBoost, PrivacyBoostError } from '@testinprod-io/privacy-boost';

Analyze Bundle

# Webpack
npx webpack-bundle-analyzer stats.json

# Vite
npx vite-bundle-visualizer

Monitoring Performance

Track Operation Duration

async function timedOperation<T>(
  name: string,
  operation: () => Promise<T>
): Promise<T> {
  const start = performance.now();
  try {
    return await operation();
  } finally {
    const duration = performance.now() - start;
    console.log(`${name}: ${duration.toFixed(2)}ms`);

    // Send to analytics
    if (duration > 5000) {
      trackSlowOperation(name, duration);
    }
  }
}

// Usage
const result = await timedOperation('deposit', () =>
  sdk.vault.shield(params)
);

React DevTools Profiler

Use React DevTools Profiler to identify slow renders.

Best Practices Summary

1. Lazy load WASM - Don’t block initial page load
2. Use cache wisely - Balance freshness vs performance
3. Select specific state - Avoid unnecessary re-renders
4. Batch operations - Reduce network requests
5. Memoize calculations - Avoid redundant work
6. Clean up subscriptions - Prevent memory leaks
7. Monitor performance - Track slow operations

Next Steps

• Error Handling