performance.md

Performance Tips

A guide to optimizing your Reflex application for maximum performance.

Value Updates

1. Minimize Update Frequency

Only update values when necessary.

✅ Good:

// Updates only when value significantly changes
const position = reflex({
  initialValue: { x: 0, y: 0 },
  equals: (prev, next) => 
    Math.abs(prev.x - next.x) < 0.1 && 
    Math.abs(prev.y - next.y) < 0.1
});

❌ Bad:

// Updates on every tiny change
position.setValue({ x: mouse.x, y: mouse.y });

2. Batch Related Updates

Group related updates to reduce the number of notifications.

✅ Good:

Reflex.batch(() => {
  user.name.setValue('John');
  user.email.setValue('[email protected]');
  user.preferences.setValue({ theme: 'dark' });
});

❌ Bad:

// Three separate update cycles
user.name.setValue('John');
user.email.setValue('[email protected]');
user.preferences.setValue({ theme: 'dark' });

Computed Values

3. Optimize Computations

Keep computed values efficient and minimal.

✅ Good:

// Efficient computation
const visibleItems = computed(
  [items, filter],
  ([items, filter]) => items.filter(item => item.type === filter)
);

❌ Bad:

// Expensive computation on every update
const visibleItems = computed(
  [items, filter],
  ([items, filter]) => {
    return items
      .map(expensiveTransform)
      .filter(item => item.type === filter)
      .sort(expensiveSort);
  }
);

4. Cache Expensive Operations

Use memoization for expensive operations.

✅ Good:

const memoizedTransform = memoize(expensiveTransform);

const processedItems = computed(
  [items],
  ([items]) => items.map(memoizedTransform)
);

Memory Management

5. Clean Up Unused Subscriptions

Remove subscriptions that are no longer needed.

✅ Good:

class Component {
  private cleanup: Array<() => void> = [];

  init() {
    this.cleanup.push(
      value1.subscribe(this.handler1),
      value2.subscribe(this.handler2)
    );
  }

  destroy() {
    this.cleanup.forEach(fn => fn());
    this.cleanup = [];
  }
}

6. Avoid Memory Leaks

Be careful with closures and references.

✅ Good:

class Component {
  private handler = (value: number) => {
    // Handler bound to instance
    this.update(value);
  };

  init() {
    return value.subscribe(this.handler);
  }
}

❌ Bad:

class Component {
  init() {
    // Creates new closure on every init
    return value.subscribe(value => {
      this.update(value);
    });
  }
}

Flow Control

7. Use Backpressure Operators

Control high-frequency updates with appropriate operators.

✅ Good:

// Throttle rapid updates
const throttledMouse = mousePosition.throttle(16); // ~60fps

// Buffer and batch process updates
const bufferedUpdates = updates.buffer({
  size: 10,
  time: 1000
});

// Sample at regular intervals
const sampledValue = value.sample(1000);

8. Debounce User Input

Delay processing of rapid user input.

✅ Good:

const searchTerm = reflex({ initialValue: '' });
const debouncedSearch = searchTerm.pipe(
  debounce(300),
  filter(term => term.length >= 3)
);

Deep Reactivity

9. Optimize Deep Objects

Be selective with deep reactivity.

✅ Good:

// Only track necessary paths
const user = deepReflex({
  initialValue: {
    profile: { name: '', settings: {} },
    // Non-reactive data
    staticData: { /* ... */ }
  },
  paths: ['profile.name', 'profile.settings']
});

10. Use Shallow Comparison When Possible

Don't use deep comparison when unnecessary.

✅ Good:

const list = reflex({
  initialValue: [],
  equals: (prev, next) => prev.length === next.length
});

Framework Integration

11. Optimize Framework Bindings

Create efficient framework integrations.

✅ Good:

// React optimization
function useReflex<T>(value: Reflex<T>): T {
  const [state, setState] = useState(value.getValue());
  
  useEffect(() => {
    // Only subscribe once
    return value.subscribe(setState);
  }, [value]); // Proper dependency
  
  return state;
}

12. Avoid Unnecessary Re-renders

Prevent unnecessary UI updates.

✅ Good:

// React component with optimization
const TodoItem = memo(function TodoItem({ todo }: Props) {
  const item = useReflex(todo);
  return <li>{item.text}</li>;
});

Testing and Monitoring

13. Performance Monitoring

Add performance monitoring in development.

✅ Good:

const monitoredValue = reflex({
  initialValue: 0,
  middleware: [
    value => {
      performance.mark('value-update-start');
      const result = expensiveOperation(value);
      performance.mark('value-update-end');
      performance.measure(
        'value-update',
        'value-update-start',
        'value-update-end'
      );
      return result;
    }
  ]
});

14. Performance Testing

Write performance tests.

✅ Good:

describe('Performance', () => {
  it('should handle rapid updates efficiently', () => {
    const value = reflex({ initialValue: 0 });
    const start = performance.now();
    
    for (let i = 0; i < 1000; i++) {
      value.setValue(i);
    }
    
    const end = performance.now();
    expect(end - start).toBeLessThan(100);
  });
});

Next Steps

• Review the Best Practices guide for more optimization tips
• See the Advanced Usage Guide for complex patterns
• Check the API Reference for detailed method documentation