🎯 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 is a Signal?

A signal is like a smart variable that automatically tells your UI when it changes. It's the simplest way to manage state in React!

🎯 Think of it like this: A regular variable is silent when it changes. A signal shouts "Hey, I changed!" and React automatically updates your UI.

🤔 createSignal vs useSignal - What's the Difference?

📦 createSignal()

Creates a standalone signal outside components

// Outside component
const count = createSignal(0);

// Use anywhere!
function Display() {
  const value = useSignalValue(count);
  return <div>{value}</div>;
}

✅ Use for global state shared across components

⚛️ useSignal()

React hook - creates signal inside component

// Inside component
function Counter() {
  const [count, setCount] = useSignal(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

✅ Use for local state (like useState but reactive!)

💡 In this demo: We use useSignal(0) because the counter is local to this component. For global state (like shopping cart), use createSignal()!

💡

Why Use Signals?

Because they make state management ridiculously simple!

❌ Without Signals (Regular useState)

• Need Context for global state
• Props drilling everywhere
• Complex state management
• Lots of boilerplate code

✅ With Signals

• Works anywhere instantly
• No props drilling needed
• Simple & straightforward
• Just one line of code!

🚀

How To Use It? (3 Super Easy Steps!)

Create the signal

const [count, setCount] = useSignal(0);
//     ↑       ↑              ↑
//   value  updater    starting value

Display it in your UI

<div>{count}</div>  // Just use it like a regular variable!

Update it when needed

setCount(count + 1)  // UI updates automatically! ✨

🎉 That's it! You're now using reactive state! Try it below ⬇️

👆 Try the buttons below!

🔧

What Problems Does This Solve?

😰 Traditional React Problems

❌Props Drilling: Passing state through 5+ components
❌Context Hell: Multiple providers wrapping your app
❌Complex Setup: Redux with actions, reducers, types...
❌Boilerplate Code: 50+ lines for a simple counter

😊 SignalForge Solutions

✅No Drilling: Access state anywhere, anytime
✅No Providers: Zero setup, works immediately
✅Simple: If you know useState, you know signals
✅Minimal Code: 3 lines for the same counter!

🌍

Real-World Example: Shopping Cart

Imagine you need a shopping cart quantity that multiple components can see and update:

📍 Create once (anywhere)

// cart.js
export const cartCount = 
  createSignal(0);

🎯 Use anywhere

// Header.jsx
const count = 
  useSignalValue(cartCount);
return <Badge>{count}</Badge>;

➕ Update anywhere

// ProductCard.jsx
cartCount.set(
  cartCount.get() + 1
);

✨ Auto-updates!

// All components using 
// cartCount update 
// automatically! 🎉

🚀 Complete Code Example

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)