Where can I and can't I use hooks?

[gjgiezeman]

While playing around with the code of the tutorial, I discovered that I can't move a hook to a separate function without changing the behaviour of the program. Let me show the adaptations I made to the tutorial. First, some refactoring that works:

async fn get_videos() -> Result<Vec<Video>, gloo_net::Error> {
    let fetched_videos: Vec<Video> =
        Request::get("http://localhost:3000/videos")
        .send()
        .await?
        .json()
        .await?;
    Ok(fetched_videos)
}

fn set_videos(videos: UseStateHandle<Vec<Video>>) {
    wasm_bindgen_futures::spawn_local(async move {
        let fetched_videos_result = get_videos().await.unwrap();
        videos.set(fetched_videos_result);
    });
}

#[component]
fn App() -> Html {
    let videos = use_state(|| vec![]);
    {
        let videos = videos.clone();
        use_effect_with((), move |_| {
            set_videos(videos);
            || ()
        });
    }
    // ... left out the rest of the tutorial code
}

But if I try to move the use_effect_with to a separate function, I end up with an empty list of videos.

fn load_videos(videos: UseStateHandle<Vec<Video>>) {
    use_effect_with((), move |_| {
        set_videos(videos);
        || ()
    });
}

#[component]
fn App() -> Html {
    let videos = use_state(|| vec![]);
    load_videos(videos.clone());
    // ... left out the rest of the tutorial code
}

I had a look at the Rules of hooks, but could not figure out that those rules forbid this. And I get no compile or runtime error. So, why does moving that code to the load_videos function fail?

[Madoshakalaka]

Hooks can only be used in the following locations:

• Top-level of a function/hook.
• Blocks inside a function/hook, given it is not already branched.
• In the condition of a top-level if expression inside a function/hook.
• In the scrutinee of a top-level match expression inside a function/hook.

I agree this is a bit misleading.
All functions above actually mean "function component"

alternatively you can make this work by making load_videos a custom hook with the "hook" attribute:

#[hook]
fn use_load_videos(videos: UseStateHandle<Vec<Video>>) {
    use_effect_with((), move |_| {
        set_videos(videos);
        || ()
    });
}

[gjgiezeman]

Thanks, this clarifies things. So, I guess, the documentation should be read as follows.
Hooks can only be used in functions:

• that are components
• that are hooks
• (perhaps somewhere in struct component functions)

Inside these functions, the usage of a hook is only allowed

• on the top level
• inside a block, given it is not already branched (this is rather vague to me)
• in the condition of a top level if expression
• in the scrutinee of a top level match expression

And the claim These rules are enforced by either compile-time or run-time errors should be weakened or, preferably, should be true.

[Madoshakalaka]

On second thought, this is valuable feedback. Normally when users place a hook wrong it doesn't compile. But I realize now these hooks with no return value can be go under the radar.

Yew can definitely use some improvements on catching these outliers.