Signal Performance Optimization

Optimize signal performance through custom equality functions, dependency management, and batching strategies.

Custom Equality Functions

import { signal } from '@angular/core';

// ✅ Optimize object comparisons
const user = signal(
  { id: 1, name: 'Alice' },
  { equal: (a, b) => a.id === b.id } // Only update if ID changes
);

// Won't trigger updates (same ID)
user.set({ id: 1, name: 'Alice Smith' });

Minimize Dependencies

// ❌ Bad: Unnecessary dependencies
const data = signal({ value: 1, metadata: {} });
const result = computed(() => data()); // Tracks entire object

// ✅ Good: Extract only what's needed
const value = computed(() => data().value);
const metadata = computed(() => data().metadata);

Batch Updates

const firstName = signal('John');
const lastName = signal('Doe');
const person = signal({ first: 'John', last: 'Doe' });

// ❌ Bad: Multiple updates
firstName.set('Jane');
lastName.set('Smith'); // Two recomputations

// ✅ Good: Single object update
person.set({ first: 'Jane', last: 'Smith' }); // One recomputation

Memoization

const source = signal(0);
const expensiveCalculation = (val: number) => val * 2;

const expensiveComputed = computed(() => {
  const data = source();
  // Expensive computation only runs when source changes
  return expensiveCalculation(data);
});

Key Takeaways

1. Custom equality prevents unnecessary updates
2. Minimize dependencies for targeted reactivity
3. Batch related updates together
4. Leverage memoization with computed signals

Next Steps

• Explore Reactivity Deep Dive
• Learn about Custom Equality Functions

References

• Angular Signals Documentation