Creating Signals

import { createSignal } from '@cerberus/signals'

Usage

When you want to create a signal outside of a component context. This can be used globally, in a store, or any other way your purpose needs.

There are two ways to read a global signal within a component JSX:

1. ReactiveText (recommended) for fine-grained reactivity
2. useRead hook for reference consumption within JSX

Basic State

createSignal allows you to manage state outside of the React render context.

Reading State

The easiest way to get the current value of primitive-based signal is the ReactiveText component (which provides fine-grained reactivity).

When you need to reference a signal in any JSX-related context (e.g., Show or For) use the useRead hook to obtain the value.

Note

We always recommend utilizing ReactiveText over useRead to provide better control over React rendering in addition to a cleaner DX.

Setting State

With Cerberus Signals, how you set the state no longer matters. You are free to use mutation or immutability. Both results will yield the same high performant and reliable reactivity.

In this example we utilize the createComputed primitive to create a reactive signal which provides a computational value. This is similar to the native React useMemo hook.

Note

Notice how the createComputed primitive doesn't require a dependency Array? In Cerberus Signals, we auto-detect signals so you don't have to waste time declaring.

Objects and Arrays

When storing Objects or Arrays (any non-Primitiva value) in a signal, we recommend using immutable updates when setting new values. Doing so will ensure the best performance outcome since the graph uses strict equality (!==) to detect changes.

Stores

You can create global stores to read and manage state across your entire application, or simply devote to a single feature (this is how the Data Grid is designed).

This allows you to have an "multi-signal" and action based solution that will both improve React rendering performance and code scalability.

API

createSignal accepts the following options:

Return

createSignal returns a SignalTuple<T> Array of the following values: