Reactivity. Beyond React.

Signalium is a complete, batteries-included state-management system for React apps, with support for async, subscription management, and more out-of-the-box. Say goodbye to dependency lists, performance issues, and the overall complexity of Hooks - without rewriting your entire app.

Reactivity. Beyond React.

Signalium is a complete, framework-agnostic replacement for React Hooks that works everywhere: Single-page apps, native clients, server apps, background threads, and more.

Say goodbye to endless dependency lists, performance issues, and complex side-effects. With out of the box support for async, contexts, managed-effects, and more, Signalium builds on the best of Hooks, and leaves behind the rest.

Get startedView on GitHub
useState:0
useCounter
useDivide
useFloor
useQuotient
useFloorCounter

Standard hooks count: 0.

Rendered 1 times.

const useCounter = (ms) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount((count) => count + 1);
    }, ms);

    return () => clearInterval(id);
  }, [ms]);

  return count;
};

const useDivide = (value, divideBy) => value / divideBy;

const useFloor = (value) => Math.floor(value);

const useQuotient = (value, divideBy) =>
  useFloor(useDivide(value, divideBy));

const useFloorCounter = () => useQuotient(useCounter(5000), 3);

let renderCount = 0;
export default function Component() {
  const value = useFloorCounter();

  return (
    <div className="flex flex-col px-4 md:py-12 text-center md:text-lg">
      <p className="text-xl md:text-2xl">Standard hooks count: {value}.</p>
      <p>Rendered {++renderCount} times.</p>
    </div>
  )
}
useCounter
useDivide
useFloor
useQuotient
useFloorCounter

Signal hooks count: 0.

Rendered 1 times.

const useCounter = subscription((state, ms) => {
  const id = setInterval(() => state.set(state.get() + 1), ms)

  return () => clearInterval(id)
}, { initValue: 0 });

const useDivide = computed((value, divideBy) =>
  value / divideBy
);

const useFloor = computed((value) => Math.floor(value));

const useQuotient = computed((value, divideBy) =>
  useFloor(useDivide(value, divideBy))
);

const useFloorCounter = computed(() =>
  useQuotient(useCounter(5000), 3)
);

let renderCount = 0;
export default function Component() {
  const value = useFloorCounter();

  return (
    <div className="flex flex-col px-4 md:py-12 text-center md:text-lg">
      <p className="text-xl md:text-2xl">Signal hooks count: {value}.</p>
      <p>Rendered {++renderCount} times.</p>
    </div>
  )
}
Next
A Brief Manifesto