Include updated documentation on best practices related to making requests or doing other asynchronous operations inside Yew components

[evklein]

This is about:

• A typo
• Innaccurate/misleading documentation (e.g. technically incorrect advice)
• Undocumented code
• Outdated documentation
• Other

Problem
Currently, there is nothing in the documentation for Yew 0.19 on making requests or doing other asynchronous operations inside of components or function components. Since the removal of the fetch service, the documentation recommends switching to libraries like reqwest for making API calls, but there are no code examples or best practices for how to do so. While this can be easily accomplished with libraries like yew-hooks or wasm-bindgen (which, afaik only work in function components) I'd like to see some instructions, agreed on by the overall community, that would help new Yewsers like myself.

The process of figuring out how to go about doing this is difficult (especially with components not allowing the async keyword on lifetime methods like create or update), and from what I can tell there's not really even a standardized way of going about it.

Questionaire (Optional)

• I'd like to write this documentation
• I'd like to write this documentation but I'm not sure what's needed
• I don't have time to add this right now, but maybe later

[WorldSEnder]

How common is it for you to perform some async action and state.set(result_of_async) where let state = use_state(...);? Similar to how struct components can use Scope::send_future, it might make sense to have some set_future et al methods on the UseStateHandle to simplify the interaction. Imo, most of the time, the user should not have to manually use spawn_local for 90% of the common tasks.

[evklein]

How common is it for you to perform some async action and state.set(result_of_async) where let state = use_state(...);?

I mean, this seems like the standard way to do this, outside of using spawn_local, though I haven't seen any super authoritative resources on what's best.

Using spawn_local ultimately feels a little scary, even though I'm trusting of what's actually happening. I just wish the docs would accommodate the newby standpoint.

[hamza1311]

There's a section on fetching data in the tutorial. I'm not sure if we need a specific section for it in the documentation. Maybe we can add a "Promises with wasm_bindgen_futures" page under "Using Basic Web Technologies In Yew"?

Also on master, there's use_future/use_future_with_deps available to be used with Suspense

[WorldSEnder]

Purely from a documentation standpoint, a "Working with async" makes sense, addressing how js promises are converted like you said, but also give an overview of the platform API and other methods that use spawn - for convenience.

[evklein]

@hamza1311 There's no guidance on that page for doing anything similar with non-function components, fyi.

From a user's standpoint, I think it'd be helpful to add a new section to the docs entirely, or update the tutorial to accomodate other types of components, or some combination of the 2.

[evklein]

Also - just to anyone who stumbles upon this: I've found the most concise way to handle async requests within a component lifecycle function (like rendered) is to use send_future such as this way:

fn rendered(&mut self, ctx: &Context<Self>, first_render: bool) {
    if first_render {
        ctx.link().send_future(fetch_initial_items()); // Where fetch_initial_items() is async, and returns a Message that gets caught in the update() lifecycle method
    }
}

I find this to be a lot more concise than what's currently in the tutorial, plus it lets you access the lifecycle of the component and avoid some of the hook-cloning that's inevitable when you use wasm_bindgen