👂 Subscribe - Listen to Signal Changes

Monitor signal changes outside React. Perfect for logging, analytics, and debugging!

📚 What You'll Learn

✓Subscribe to signal changes with signal.subscribe()
✓Unsubscribe properly to prevent memory leaks
✓Listen to changes outside React components
✓Build logging, analytics, and monitoring systems

🎮 Try It: Subscribe and Watch Changes

Subscribe to see logs appear when the signal changes!

Signal Value

Not Subscribed

Subscription Logs

🚀 How It Works (3 Simple Steps)

Step 1: Create or access a signal

const mySignal = createSignal(0);

Step 2: Subscribe with a callback function

const unsubscribe = mySignal.subscribe((newValue) => {
  console.log('Changed to:', newValue);
});

💡 Your callback runs every time the signal changes!

Step 3: Always clean up when done

unsubscribe(); // Prevents memory leaks!

💻 Complete Code Example

import { createSignal } from 'signalforge/core';

// Create a signal
const userCount = createSignal(0);

// Subscribe to changes
const unsubscribe = userCount.subscribe((newCount) => {
  console.log(`Users online: ${newCount}`);
  
  // Send to analytics
  analytics.track('user_count_changed', { count: newCount });
  
  // Update dashboard
  updateDashboard(newCount);
});

// When a user joins
userCount.set(userCount.get() + 1); // Triggers subscriber!

// When a user leaves
userCount.set(userCount.get() - 1); // Triggers subscriber!

// Clean up when component unmounts
useEffect(() => {
  return () => unsubscribe();
}, []);

// ✨ Benefits:
// • Works outside React components
// • Perfect for logging and analytics
// • No re-renders triggered
// • Can have multiple subscribers

🌍 Real-World Use Cases

📊 Analytics Tracking

Send events to analytics when signals change

signal.subscribe((val) => {
  analytics.track('value_changed', {val});
});

🐛 Debug Logging

Log all state changes during development

signal.subscribe((val) => {
  console.log('State:', val);
});

💾 Auto-Save

Save to localStorage on every change

signal.subscribe((val) => {
  localStorage.setItem('data', val);
});

🔔 Notifications

Show alerts when values reach thresholds

signal.subscribe((val) => {
  if (val > 100) alert('High!');
});

⚠️ Important: Always Unsubscribe!

Forgetting to unsubscribe causes memory leaks. Your callback will keep running even after the component unmounts!

❌ Bad - Memory Leak

useEffect(() => {
  signal.subscribe(callback);
  // No cleanup!
}, []);

✅ Good - Clean Cleanup

useEffect(() => {
  const unsub = signal.subscribe(callback);
  return () => unsub();
}, []);

🎓 Next Steps

Master subscriptions? Try these advanced patterns:

Effects →Persistent Signals →DevTools →