Identity and lifecycle

These modifiers connect a component to the framework’s identity and lifecycle machinery. id gives a component a stable identity for diffing, animation, and scroll position tracking. tag associates a component with a selection value inside controls like Picker. onAppear and onDisappear run a callback when the component is inserted into or removed from the view tree — use them to load data, start and stop timers, or trigger animations.

id

Sets a stable identity for diffing and animations.

.id(value: string | number): Component

value

string | number

required

A unique identifier for this component. Used by the framework for diffing, animations, and scroll position tracking.

Identifying items in a list

ForEach(items, (item) =>
    Text(item.name).id(item.id)
)

Triggering view replacement with identity changes Changing the id value tells the framework this is a new component, triggering removal of the old one and insertion of the new one (including any transition animations).

const body = () => {
    const [selectedTab, setSelectedTab] = useState("home")

    return Text(selectedTab)
        .id(selectedTab)
        .transition("opacity")
}

Scroll position tracking Use .id() together with .scrollPosition() to track or scroll to specific children.

const body = () => {
    const [scrollId, setScrollId] = useState(null)

    return ScrollView([
        ForEach(items, (item) =>
            Text(item.name).id(item.id)
        )
    ]).scrollPosition({ id: scrollId, setId: setScrollId })
}

tag

Sets a tag value for identifying a component in selection contexts.

.tag(value: any): Component

value

any

required

The tag value used to identify this component. Typically a string or number. Must match the type of the Picker’s selection value.

Picker items Each item in a Picker must have a .tag() that corresponds to the selection value.

const body = () => {
    const [size, setSize] = useState("m")
    return Picker("Size", { value: size, setValue: setSize }, [
        Text("Small").tag("s"),
        Text("Medium").tag("m"),
        Text("Large").tag("l"),
    ])
}

Numeric tags

const body = () => {
    const [rating, setRating] = useState(3)
    return Picker("Rating", { value: rating, setValue: setRating }, [
        Text("1 Star").tag(1),
        Text("2 Stars").tag(2),
        Text("3 Stars").tag(3),
        Text("4 Stars").tag(4),
        Text("5 Stars").tag(5),
    ]).pickerStyle("wheel")
}

The .tag() value must match the type used in the Picker’s value and setValue props. Tags are primarily used with Picker components to associate each option with a selection value.

onAppear

Runs an action when the component first appears on screen.

.onAppear(action: () => void): Component

action

() => void

required

A callback that runs when the component appears on screen for the first time.

Logging when a view appears

Text("Hello")
    .onAppear(() => {
        console.log("View appeared")
    })

Loading data on appear

const body = () => {
    const [data, setData] = useState(null)

    return VStack([
        data
            ? Text(data.title)
            : Text("Loading...")
    ]).onAppear(() => {
        fetchData().then(setData)
    })
}

Triggering animations

const body = () => {
    const [isVisible, setIsVisible] = useState(false)

    return Text("Fade in")
        .opacity(isVisible ? 1 : 0)
        .onAppear(() => setIsVisible(true))
}

The action runs once when the component is first inserted into the view tree, not every time it becomes visible (e.g., after scrolling back into view).

onDisappear

Runs an action when the component is removed from the screen.

.onDisappear(action: () => void): Component

action

() => void

required

A callback that runs when the component is removed from the view tree.

Cleanup on removal

Text("Temporary view")
    .onDisappear(() => {
        console.log("View removed")
    })

Stopping a timer

const body = () => {
    const [count, setCount] = useState(0)
    const [timerId, setTimerId] = useState(null)

    return Text(String(count))
        .onAppear(() => {
            const id = setInterval(() => {
                setCount((c) => c + 1)
            }, 1000)
            setTimerId(id)
        })
        .onDisappear(() => {
            clearInterval(timerId)
        })
}

The action runs when the component is removed from the view tree, such as when a conditional hides it or when navigating away.

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

Identity and lifecycle

id

tag

onAppear

onDisappear

See also

​id

​tag

​onAppear

​onDisappear

​See also

id

tag

onAppear

onDisappear

See also