How to build a custom reusable hook with some return other than view?

[silicology1]

Following code works

use leptos::*;

pub fn sign_in_with_extension(set_name: WriteSignal<String>) {
    create_effect(move |_| {
        set_name("Rikesh".to_string());
    });
}



#[component]
pub fn ExtensionSignIn() -> impl IntoView {

    let (name, set_name) = create_signal(String::from(""));

    sign_in_with_extension(set_name);
    view! {
        <div>
        <code>{move || format!("{:#?}", name())}</code>
        </div>
    }
}

Following don't doesn't work

use leptos::*;

pub fn sign_in_with_extension() -> String {
    let (name, set_name) = create_signal(String::from(""));
    create_effect(move |_| {
        set_name("Rikesh".to_string());
        // immediately prints "Value: 0" and subscribes to `a`
        gloo::console::log!(format!("Value: {}", name()));
    });
    name()
}



#[component]
pub fn ExtensionSignIn() -> impl IntoView {

    let name = sign_in_with_extension();
    view! {
        <div>
        <code>{move || format!("{:#?}", name)}</code>
        </div>
    }
}

[basro]

Instead of your hook returning a String make it return ReadSignal<String>

use leptos::*;

pub fn sign_in_with_extension() -> ReadSignal<String> {
    let (name, set_name) = create_signal(String::from(""));
    create_effect(move |_| {
        set_name("Rikesh".to_string());
        // immediately prints "Value: 0" and subscribes to `a`
        gloo::console::log!(format!("Value: {}", name()));
    });
    name
}



#[component]
pub fn ExtensionSignIn() -> impl IntoView {

    let name = sign_in_with_extension();
    view! {
        <div>
        <code>{move || format!("{:#?}", name())}</code>
        </div>
    }
}