Treege Logo
v2.1.0

Command Palette

Search for a command to run...

Performance Optimization

Follow these best practices to ensure optimal performance.

Bundle Size Optimization

Use Selective Imports

// ✅ Good - Import only the renderer
import { TreegeRenderer } from "treege/renderer"
 
// ❌ Bad - Imports everything
import { TreegeRenderer } from "treege"

Bundle size comparison:

  • Full package: ~150KB
  • Renderer only: ~80KB
  • Editor only: ~120KB

Code Splitting

Use dynamic imports for better code splitting:

import dynamic from "next/dynamic"
 
const TreegeEditor = dynamic(
  () => import("treege/editor").then(mod => ({ default: mod.TreegeEditor })),
  { ssr: false }
)

React Performance

Memoize Callbacks

import { useCallback, useState } from "react"
 
export default function MyForm({ flow }) {
  const handleSubmit = useCallback(async (data) => {
    await fetch("/api/submit", {
      method: "POST",
      body: JSON.stringify(data)
    })
  }, [])
 
  const handleChange = useCallback((data) => {
    setValues(data)
  }, [])
 
  return (
    <TreegeRenderer
      flows={flow}
      onSubmit={handleSubmit}
      onChange={handleChange}
    />
  )
}

Memoize Flow Data

import { useMemo } from "react"
 
export default function MyForm() {
  const flow = useMemo(() => ({
    nodes: [/* ... */],
    edges: [/* ... */]
  }), [])
 
  return <TreegeRenderer flows={flow} onSubmit={handleSubmit} />
}

Validation Performance

Choose the Right Validation Mode

// ✅ Good for large forms - validates on submit
<TreegeRenderer
  flows={flow}
  onSubmit={handleSubmit}
  validationMode="onSubmit"
/>
 
// ⚠️ Can be slow - validates on every change
<TreegeRenderer
  flows={flow}
  onSubmit={handleSubmit}
  validationMode="onChange"
/>

Best Practices

  1. ✅ Use selective imports (treege/renderer or treege/editor)
  2. ✅ Memoize callbacks with useCallback
  3. ✅ Use validationMode="onSubmit" for large forms
  4. ✅ Keep validation functions simple
  5. ✅ Use code splitting for the editor
  6. ✅ Enable production builds with minification