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

```lua
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.

```lua
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.