Leptos Book

In a controlled input, the framework manages the input's state. On every on:input event, a signal is updated, and that signal is used to update the input's DOM property.

Key technical details:

1. Use on:input for real-time updates (fires on every keystroke) or on:change for updates when the input loses focus.
2. Use prop:value (or prop:checked for checkboxes) instead of the value attribute. The value attribute only sets the initial value, whereas the value property controls the current value as the user types.
3. To access the event target in a typed manner, use the on:input:target syntax.

let (name, set_name) = signal("Controlled".to_string());

view! {
    <input type="text"
        // :target gives typed access to the event target
        on:input:target=move |ev| {
            // .value() returns the current value of the HTML input
            set_name.set(ev.target().value());
        }

        // Use prop: to update the DOM property, not the attribute
        prop:value=name
    />
    <p>"Name is: " {name}</p>
}

The <Form/> component from leptos_router behaves like a standard HTML <form> but performs client-side navigation instead of full page reloads. This allows you to update the URL and application state without a round-trip to the server.

Supported Methods

• method="GET": Navigates to the URL defined in the action attribute, encoding form input data into the URL query string. This is ideal for search interfaces where you want the search state to be shareable via a URL.
• method="POST": Makes a POST request to the action URL and handles the server's response.

Key Benefits

• URL Synchronization: By using GET forms, the application state (like search queries) is stored directly in the URL. This makes the application bookmarkable and shareable.
• Reactive Data Flow: When a <Form method="GET" /> is submitted, the URL changes, which can trigger reactive updates via hooks like use_query_map(), subsequently reloading Resources driven by those query parameters.

// Example of a GET form for search
<Form method="GET" action="">
    <input type="search" name="q" value=search/>
    <input type="submit"/>
</Form>

In an uncontrolled input, the browser manages the input's state. Instead of updating a signal on every keystroke, you use a NodeRef to pull the value from the DOM element only when needed (e.g., during a form submission).

Implementation details:

1. Create a NodeRef<html::Input> (or the appropriate element type from leptos::html).
2. Attach it to the element using node_ref=....
3. Use the value attribute (not prop:value) to set the initial value.
4. Access the value by calling .get() on the NodeRef, which returns an Option<leptos::HtmlElement<T>>. This element implements Deref to a web_sys type, allowing you to call methods like .value().

let (name, set_name) = signal("Uncontrolled".to_string());
let input_element: NodeRef<html::Input> = NodeRef::new();

view! {
    <form on:submit=move |ev| {
        ev.prevent_default();
        let val = input_element.get().expect("mounted").value();
        set_name.set(val);
    }>
        <input type="text" value="Uncontrolled" node_ref=input_element />
        <input type="submit" value="Submit"/>
    </form>
}

When building components, you may want to "project" children through multiple layers (e.g., passing children from a parent component down to a deeply nested child).

If you attempt to move children or fallback props directly into nested components that use ChildrenFn (like <Show/> or <Suspense/>), you will encounter a compilation error: expected a closure that implements the Fn trait, but this closure only implements FnOnce. This happens because components like <Show/> need to call their children multiple times, but moving the props into the first layer of children consumes them, making them unavailable for subsequent calls.

To solve this, use StoredValue to hand ownership of the props to the reactive system. This allows you to access them via a Copy and 'static reference that can be called multiple times.

pub fn NestedShow<F, IV>(fallback: F, children: ChildrenFn) -> impl IntoView
where
    F: Fn() -> IV + Send + Sync + 'static,
    IV: IntoView + 'static,
{
    let fallback = StoredValue::new(fallback);
    let children = StoredValue::new(children);

    view! {
        <Show
            when=|| todo!()
            fallback=|| ()
        >
            <Show
                when=move || todo!()
                fallback=move || fallback.read_value()()
            >
                {children.read_value()()}
            </Show>
        </Show>
    }
}

Leptos uses a synchronous reactive model that eliminates the need for manual dependency arrays (unlike React).

1. Automatic: The framework tracks which signals are accessed during the effect's execution and handles subscriptions automatically.
2. Dynamic: Dependencies are recalculated on every run. If an effect contains logic like if use_last.get() { last.get() }, the effect will only subscribe to last when use_last is true. When use_last becomes false, last is removed from the dependency list. This ensures the effect reruns the absolute minimum number of times.

let (first, set_first) = signal(String::new());
let (last, set_last) = signal(String::new());
let (use_last, set_use_last) = signal(true);

// this will add the name to the log
// any time one of the source signals changes
Effect::new(move |_| {
    logging::log!(
        "{}", if use_last.get() {
            format!("{} {}", first.get(), last.get())
        } else {
            first.get()
        },
    )
});