3. Signals (Reactivity) and Dynamic Render

Base

There are mechanisms in the framework that allow you to achieve application reactivity.
First, we need to understand how reactivity works:

The Signal is responsible for the reactivity. Signal returns a structure with the value property. Which, when changed, sends an event for changes in the Signal object. That allows to work with small details in the framework in a rather optimized way.

Practice:

import { comp } from "horizon-core/component";
import { useSignal } from "horizon-core/state";

export default comp((_, { text, $ }) => {
    // Creating Signal
    const counter = useSignal(0)

    // Creating button with click event and text like `Counter: ${counter.value}`
    $('button', { '@click': () => counter.value++ }, () => {
        text('Counter: ')
        text(counter)
    })
})