State Management in Freya

State management is crucial for interactive applications. I’ll show you how Freya handles state.

Using use_state

The use_state hook allows you to maintain state across renders:

use freya::prelude::*;

fn app() -> impl IntoElement {
    let mut count = use_state(|| 0);

    rect()
        .width(Size::fill())
        .height(Size::fill())
        .direction(Direction::Vertical)
        .cross_align(Alignment::Center)
        .child(
            label()
                .font_size(24.0)
                .child(format!("Count: {}", count.read()))
        )
        .child(
            Button::new()
                .on_press(move |_| *count.write() += 1)
                .child(label().text("Increment"))
        )
}

State Patterns

Toggle State

fn app() -> impl IntoElement {
    let mut is_toggled = use_state(|| false);

    Button::new()
        .on_press(move |_| {
            let current = *is_toggled.read();
            is_toggled.set(!current);
        })
        .child(
            label().text(if *is_toggled.read() { "ON" } else { "OFF" })
        )
}

List State

fn app() -> impl IntoElement {
    let mut items = use_state(|| vec!["Item 1".to_string()]);

    rect()
        .direction(Direction::Vertical)
        // Render items
        .children(
            items.read().iter().map(|item| {
                label().text(item.clone())
            })
        )
        .child(
            Button::new()
                .on_press(move |_| {
                    items.write().push(format!("Item {}", items.read().len() + 1));
                })
                .child(label().text("Add Item"))
        )
}

What’s Next

Next, I’ll learn about event handling in depth.

Summary

• use_state manages component state with .read() and .write()/.set()
• State updates trigger re-renders
• Closures capture state signals for event handlers
• Use .children() with iterators for lists