DioxusLabs / dioxus

Fullstack GUI library for web, desktop, mobile, and more.
https://dioxuslabs.com
Apache License 2.0
18.5k stars 704 forks source link

Diffing cloned Components with readonlysignal panics on double drop #2331

Open ealmloff opened 2 weeks ago

ealmloff commented 2 weeks ago

Problem

Any props with the T -> ReadOnlySignal logic fail to diff if you try to render it multiple times:

This is the signal version of the EventHandler problem fixed in #2298

Steps To Reproduce

Run this code:

use dioxus::prelude::*;

fn main() {
    launch(app);
}

fn app() -> Element {
    if generation() < 5 {
        println!("Generating new props");
        needs_update();
    }

    let read_only_signal_rsx = rsx! {
        // # Creation
        // This creates a new read only signal which is owned by the props
        // There is currently no Clone requirement to use this syntax
        // 
        // # Diffing
        // When memorizing the props, if the value is different then value is taken out of the signal
        TakesReadOnlySignal { sig: generation() as i32 }
    };

    rsx! {
        // When this is diffed, the value is moved out of read_only_signal_rsx
        {read_only_signal_rsx.clone()}
        // When this is diffed, it panics because the value has already been moved out of the signal in the previous line
        {read_only_signal_rsx}
    }
}

#[component]
fn TakesReadOnlySignal(sig: ReadOnlySignal<i32>) -> Element {
    rsx! {}
}

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment:

Questionnaire

ealmloff commented 2 weeks ago

I can think of two different ways to fix this issue: 1) Introduce an extra layer of interior mutability in every ReadOnlySignal that allows you to update the signal it points to in place. Instead of moving the readonlysignal out of the props, we could just make the readonlysignal in the component point to the new signal. This is non-breaking, but it introduces a performance penalty for all readonlysignals 2) Introduce a difference between the mounted and unmounted props. The unmounted props for TakesReadOnlySignal { sig: generation() as i32 } could be the i32 value which is cloned along with the component. The ReadOnlySignal could then be created in the child component instead of moved out of the props