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

Stateful Components

A stateful component is a component that stores some data internally.

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

Internal State

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 instance
end

mount(Counter, game.StarterGui)

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 component.

We use mount() to create the counter within a reactive scope, which also takes a second argument to parent the counter to another instance.

External State

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 instance
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 using it is created within a reactive scope.