leptos-rs / book

The home for the Leptos book, which can be found deployed at https://book.leptos.dev
MIT License
80 stars 62 forks source link

"Global State Management" Chapter - add new `<Provider />` component description #3

Open diversable opened 10 months ago

diversable commented 10 months ago

Issues to Address in 'Global State Management' Chapter

1. Add New <Provider /> Component Description & Example

A new <Provider /> component was added in Leptos v0.5.3 - a description of the component and an example of usage should be added alongside the other options for state management.

For more info, see:

From Leptos 0.5.3 release notes: Release v0.5.3 · leptos-rs/leptos · GitHub """ Optional Context <Provider/> Component

Since 0.5.0, there've been a couple instances of bugs or confusing behavior related to the fact that context now follows the reactive graph, not the component tree (see #1986#2038).

This release includes a <Provider/> component that provides a certain value via context only to its children:

#[component]
pub fn App() -> impl IntoView {
    // each Provider will only provide the value to its children
    view! {
        <Provider value=1u8>
            // correctly gets 1 from context
            {use_context::<u8>().unwrap_or(0)}
        </Provider>
        <Provider value=2u8>
            // correctly gets 2 from context
            {use_context::<u8>().unwrap_or(0)}
        </Provider>
        // does not find any u8 in context
        {use_context::<u8>().unwrap_or(0)}
    }
}

provide_context continues working as it has since 0.5.0, and if you're using it without problems you can ignore this, or use it if you prefer to aesthetics. If you're in a situation where you need to provide multiple context values of the same type and ensure that they are scoped correctly and that siblings do not overwrite one another, use <Provider/>. If you have no idea what I mean, check the issues above for examples of the bugs this fixes. """