Reactivity. Beyond React.

Functional, performant, signal-based hooks

Reactivity. Beyond React.

Functional, performant, signal-based hooks

In 2018, React revolutionized the frontend world with Hooks, fundamentally shifting how we approached functional reactivity.

However, time has revealed some significant problems. Endless dependency lists, performance issues, and complex side-effects plague applications at scale, with even the most disciplined developers struggling to avoid common pitfalls.

What if there was an easier way?

With Signalium, you get the ergonomics of Hooks without the complexity. And it works everywhere.

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