Reactivity

The HellaJS reactive core and store packages are predictable, composable, and easy to use for both simple and complex state management.

This isn’t a guide to reactivity in general, but rather how HellaJS implements it. If you’re new to reactivity, check out some other resources.

Note

The core package is a modified fork of Alien Signals. Credit to that fine work!

Basic Reactivity

const count = signal(0);
const doubleCount = computed(() => count() * 2);

effect(() => {
  console.log(`Count: ${count()}, Double Count: ${doubleCount()}`);
});

count(1); // Logs: Count: 1, Double Count: 2

You don’t need to use computed inside a component, just a function that uses a signal.

const Counter = () => {
  const count = signal(1);
  const doubleCount = () => count() * 2;

  return (
    <div>
      <p>Counter: {count}</p>
      <p>Double Count: {doubleCount}</p>
    </div>
  );
};

Reactive Stores

Stores are a great way to manage state in a more structured way. They allow you to create deeply reactive objects with nested properties.

const userStore = store({
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York',
  },
});

console.log(userStore.name()); // 'John Doe'
console.log(userStore.address.city()); // 'New York'
console.log(userStore.address.city("San Francisco"));
console.log(userStore.address.city()); // 'San Francisco'