Signals and Hooks

The preferred primitives are:

• signal
• computed
• effect

What each one is for

signal

The source of reactive state. Good for:

• input values
• current selections
• panel expansion state

computed

Derived state. Good for:

• filtered results
• sorted results
• display-oriented values derived from other state

effect

The side-effect boundary. Good for:

• logging
• task coordination
• non-UI synchronization work

One important note:

effect is not React’s useEffect.
It has no dependency array. Dependencies are tracked automatically from reactive reads during execution.

The component-facing API

Inside components, the common shape is:

let count = cx.signal(|| 0);
 
let doubled = cx.computed({
    let count = count.clone();
    move || count.get() * 2
});
 
cx.effect({
    let doubled = doubled.clone();
    move || {
        let _ = doubled.get();
    }
});

The boundary to remember

• signal: source-of-truth state
• computed: derived state
• effect: side effects

Do not treat effect as a second state container, and do not expect a React-style dependency-array API.

Recommended next reading

• Reactivity
• Reactive System in Depth