🎯 Basic Signal - Get Started in 30 Seconds

Learn how to create and update reactive state with just one hook. No Redux, no Context, no complexity.

📚 What You'll Learn

✓How to create a signal with useSignal(initialValue)
✓How to read the current value (it's just a variable!)
✓How to update the value with setCount(newValue)

👆 Try the buttons below!

🚀 How It Works (3 Simple Steps)

Step 1: Import the hook

import { useSignal } from 'signalforge/react';

Step 2: Create your signal

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

Step 3: Use it like normal state!

{count}  // Display the value
setCount(count + 1)  // Update it

💻 Complete Code Example

import { useSignal } from 'signalforge/react';

function Counter() {
  // Create a signal with initial value 0
  const [count, setCount] = useSignal(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      
      {/* Update the signal */}
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

// That's it! Your component will automatically
// re-render when count changes. No useEffect,
// no useCallback, no useMemo needed!

💡 Why SignalForge is Better

❌ Traditional useState:

• Causes full component re-render
• Slow with many state updates
• Need useCallback/useMemo
• Complex prop drilling

✅ SignalForge useSignal:

• Only re-renders what changed
• 33x faster with batching
• No extra optimization needed
• Global state built-in

🎓 Next Steps

Now that you understand basic signals, try these demos:

Computed Signals →Effects →React Hooks →

🎮 Interactive Playground (Click to expand)