Skip to main content
.onAppear(action: () => void): Component
​
action
() => void
required
A callback that runs when the component appears on screen for the first time.

​
Support

​
Usage

​
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))
}

​
Notes

  • 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).

​
See Also

  • onDisappear — runs an action when the component is removed
  • onChange — runs an action when a value changes