vide/docs/tut/crash-course/6-stateful-component.md

Stateful Component

A stateful component is a component that stores and displays some data.

Stateful components in Vide are created using sources and effects - sources to store the data, and effects to display the data.

local create = vide.create
local source = vide.source
local effect = vide.effect

local function Counter()
    local count = source(0)

    local instance = create "TextButton" {
        Activated = function()
            count(count() + 1)
        end
    }

    effect(function()
        instance.Text = "count: " .. count()
    end)

    return count
end

Above is an example of a counter component, that when clicked, will increment its internal count, and automatically update its text to reflect that count.

Each instance of Counter() will maintain its own independent count, since the count source is created inside the scope of the component.

External sources can also be passed into components for them to use.

local function Counter(props: { count: () -> number })
    local count = props.count

    local instance = create "TextButton" {
        Activated = function()
            count(count() + 1)
        end
    }

    effect(function()
        instance.Text = "count: " .. count()
    end)

    return count
end

local count = source(0)

Counter {
    count = count
}

count(1) -- the Counter component will update to display this count

Sources can be created internally or passed in from externally, there are no restrictions on how they are used as long as the effect is created within a reactive scope so that it can be tracked.