Skip to main content
Performance configuration options allow you to balance responsiveness with resource usage.

​
Basic Configuration

import { Orderbook } from '@krono/kit'

export const App = () => {
  return (
    <Orderbook.Root
      config={{
        symbol: 'BTC/USD',
        throttleMs: 100,
        debounceMs: 50
      }}
    >
      {/* Components */}
    </Orderbook.Root>
  )
}

​
Update Control

​
throttleMs

Limits how frequently the orderbook updates. Type: number Default: 100 
<Orderbook.Root
  config={{
    symbol: 'BTC/USD',
    throttleMs: 100
  }}
>
  {/* Components */}
</Orderbook.Root>
Use Cases:
  • 50ms - High-frequency trading
  • 100ms - Standard interfaces (recommended)
  • 250ms - Low-priority displays
  • 500ms - Historical analysis

​
debounceMs

Delays processing of rapid updates. Type: number Default: 0 
<Orderbook.Root
  config={{
    symbol: 'BTC/USD',
    debounceMs: 50
  }}
>
  {/* Components */}
</Orderbook.Root>
High debounceMs values introduce latency. Use sparingly.

​
Performance Comparison

Use CasethrottleMsdebounceMsUpdates/secLatency
HFT50020~50ms
Standard100010~100ms
Low Priority2501004~350ms

​
Optimization Tips

  • Profile Your App: Use DevTools to measure render performance
  • Match Update Frequency: Trading: 50-100ms. Monitoring: 250-500ms
  • Reduce Depth: Lower depth and limit improve performance
  • Use Throttle Over Debounce: Throttle provides predictable intervals

Orderbook

Configure the core orderbook behavior.

History

Enable snapshot tracking and playback features for historical analysis and debugging.

Asset Pairs

Configure how trading pair metadata is fetched and cached. Required for auto-populating tickSize.

Overview

See all configuration options in one place with complete TypeScript types and defaults.