⚡ Effects - React to Changes

Run code automatically when signals change. Built-in cleanup. Simpler than useEffect!

📚 What You'll Learn

✓Run side effects with useSignalEffect()
✓Auto-track dependencies (no dependency array needed!)
✓Clean up resources properly with return functions
✓Perfect for logging, API calls, timers, and subscriptions

🎮 Try It: See Effects in Action

Click the buttons and watch the effect logs appear automatically!

Effect Logs

No logs yet. Change the counter to trigger effects.

🚀 How It Works (3 Simple Steps)

Step 1: Create your signals

const [count, setCount] = useSignal(0);

Step 2: Create an effect that uses the signal

useSignalEffect(() => {
  console.log('Count is:', count);
});

💡 It auto-tracks that it depends on count - no array needed!

Step 3: Change the signal - effect runs automatically!

setCount(5); // Effect runs! ✨

💻 Complete Code Example

import { useSignal, useSignalEffect } from 'signalforge/react';

function TimerComponent() {
  const [seconds, setSeconds] = useSignal(0);
  
  // Effect runs when seconds changes
  useSignalEffect(() => {
    console.log(`Timer at: ${seconds} seconds`);
    
    // Optional: Return cleanup function
    return () => {
      console.log(`Cleaning up timer at ${seconds}`);
    };
  });
  
  // Another effect - can have multiple!
  useSignalEffect(() => {
    if (seconds >= 10) {
      alert('Timer reached 10 seconds!');
    }
  });
  
  return (
    <div>
      <h2>{seconds} seconds</h2>
      <button onClick={() => setSeconds(seconds + 1)}>
        Add Second
      </button>
    </div>
  );
}

// ✨ No dependency array needed!
// ✨ Auto-tracks what you use
// ✨ Cleanup runs before next effect

💡 Why SignalForge Effects Are Better

❌ Traditional useEffect:

• Must manually list dependencies
• Easy to forget a dependency
• Stale closures are common bugs
• Runs on every render initially
• Verbose and error-prone

✅ SignalForge useSignalEffect:

• Auto-tracks dependencies
• Impossible to miss dependencies
• No stale closure issues
• Only runs when signals change
• Clean, simple syntax

🌍 Real-World Use Cases

📡 API Calls

Fetch data when user ID changes

useSignalEffect(() => {
  fetchUser(userId);
});

📊 Analytics Tracking

Log page views or events

useSignalEffect(() => {
  analytics.track(page);
});

⏰ Timers & Intervals

Set up timers with auto-cleanup

useSignalEffect(() => {
  const id = setInterval(fn, 1000);
  return () => clearInterval(id);
});

💾 LocalStorage Sync

Save state to localStorage

useSignalEffect(() => {
  localStorage.setItem('user', JSON.stringify(user));
});

🧹 Understanding Cleanup Functions

When your effect returns a function, it gets called before the next effect runs or when the component unmounts.

useSignalEffect(() => {
  // 1. Set up resources
  const subscription = api.subscribe(userId);
  const timer = setInterval(() => {...}, 1000);

  // 2. Return cleanup function
  return () => {
    subscription.unsubscribe(); // Clean up!
    clearInterval(timer); // Prevent memory leaks!
  };
});

💡 Pro tip: Always clean up subscriptions, timers, and listeners to prevent memory leaks!

🎓 Next Steps

Master effects? Try these advanced demos:

Subscribe →Persistent Signals →Form Validation →