📋 Array Signals - Reactive Arrays

Work with arrays efficiently! Push, filter, map - all optimized for reactive programming.

📚 What You'll Learn

✓Create reactive arrays with createArraySignal()
✓Use familiar array methods (push, pop, filter, map, etc.)
✓All mutations automatically trigger updates
✓Build lists, tables, and collections easily

🎮 Try It: Interactive Array Playground

Add items, filter, sort - all changes are reactive!

Array Contents (0 items)

🛠️ Available Array Methods

Mutating Methods (Trigger Updates)

• push(item) - Add to end
• pop() - Remove from end
• unshift(item) - Add to start
• shift() - Remove from start
• splice(index, count) - Remove/insert
• remove(item) - Remove specific item
• clear() - Remove all items
• filter(fn) - Keep matching items
• reverse() - Reverse order
• sort(fn) - Sort items

Read-Only Methods

• map(fn) - Transform items
• find(fn) - Find first match
• findIndex(fn) - Find index
• some(fn) - Check if any match
• every(fn) - Check if all match
• includes(item) - Check existence
• indexOf(item) - Get index
• length - Get count
• get() - Get raw array
• subscribe(fn) - Watch changes

💻 Complete Code Example

import { createArraySignal } from 'signalforge/utils';

// Create reactive array
const todos = createArraySignal([
  { id: 1, text: 'Learn SignalForge', done: false },
  { id: 2, text: 'Build amazing app', done: false }
]);

// Subscribe to changes
todos.subscribe(() => {
  console.log('Todos updated:', todos.get());
});

// Add items
todos.push({ id: 3, text: 'Deploy to production', done: false });
// Triggers subscriber!

// Remove items
todos.remove(todos.find(t => t.id === 2));
// Triggers subscriber!

// Filter items
todos.filter(t => !t.done);
// Triggers subscriber!

// Map (read-only, doesn't trigger)
const texts = todos.map(t => t.text);

// Use in React
function TodoList() {
  const [items, setItems] = useState([]);
  
  useEffect(() => {
    const updateItems = () => setItems([...todos.get()]);
    updateItems();
    return todos.subscribe(updateItems);
  }, []);
  
  return (
    <ul>
      {items.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

🌍 Real-World Use Cases

✅ Todo Lists

const todos = createArraySignal([]);
todos.push(newTodo);
todos.remove(completedTodo);

🛒 Shopping Cart

const cart = createArraySignal([]);
cart.push(product);
const total = cart.map(i => i.price);

💬 Chat Messages

const messages = createArraySignal([]);
messages.push(newMessage);
messages.filter(m => !m.deleted);

📊 Data Tables

const rows = createArraySignal([]);
rows.sort((a, b) => a.name - b.name);
rows.filter(r => r.active);

💡 Best Practices

✅

Use for collections and lists

Perfect for todos, cart items, messages, table rows, etc.

⚡

Mutations are optimized

Methods like push, filter, sort are optimized to only update what changed.

🎯

Familiar API

If you know JavaScript arrays, you already know how to use array signals!

🔄

Automatic updates

Every mutation triggers subscribers - no manual notify() calls needed.

🎓 Next Steps

Master array signals? Build something real:

Todo App →Shopping Cart →Big Data →