subscriber did not re-rendered in class component when context-update, and element can have multiple onclick method

[usagrada]

Problem

Class Component did not re-render, but Functional Component did re-render, when providing context is changed, to put it like React Component.

Steps To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

First, clone My Repository and run app(you may think filename(in-repo) is strange, don't worry about it.).

git clone https://github.com/usagrada/yew-todo-app.git
git checkout 23f46839197dca3ec7588dcd42a3b63f3348b919
trunk serve --open

Then, click the upper table and also click the lower table.
Then, open the code of src/pages/museum.rs and comment out lines 147 & 150.
After this comment-out, the class component's table was not re-rendered.

It is strange that td tag allows to have two onclick methods, I thought.

            // let update = ctx.link().callback(|_| MuseumProviderMessage::Msg);
            html! {
              <td
                // onclick={update}
                onclick={&click}
              >
                {field.state[i][j]}
              </td>
            }

Expected behavior
A clear and concise description of what you expected to happen.
class component runs equally to the function component, not emit message in subscribed component
FieldView

Screenshots
If applicable, add screenshots to help explain your problem.
each table was 1 clicked

Environment:

• Yew version: [v0.19.3]
• Rust version: [1.59.0, nightly]

Questionnaire

• I'm interested in fixing this myself but don't know where to start
• I would like to fix and I have a solution
• I don't have time to fix this right now, but maybe later

[voidpumpkin]

@usagrada Which component does not rerender in the codebase?

But even without getting an answer to that, i have to let you know that when using context in a struct components you yourself are responsible for the rerender of it.
When hooking into context using ctx.link().context() the context function takes a closure that gets called when your component should rerender, you just need to send a message ctx.link().send_message(Msg::MyMessageOnContextUpdate) and do the rest in the updated lidecycle method

[usagrada]

Which component does not rerender in the codebase?

The component named FieldView was not re-render, so I also pass the update function in the museum.rs:147-156 (the committed code is already written).

let update = ctx.link().callback(|_| MuseumProviderMessage::Msg);
html! {
  <td
    onclick={update}
    onclick={&click}
  >
    {field.state[i][j]}
  </td>
}
})

This component is subscribed context, so the component will re-render when the context is changed, I think.

I created simple version for explanation.

When clicking a button in a function component named ViewFunc, the value in a struct component named View isn't updated.

There is a description in document of yew, so I thought that View Component is re-rendered when the context is changed, but it was not.

ContextProvider is the component whose children will have the context available to them. The children are re-rendered when the context changes.

I realized that I am responsible for struct component re-render, but cannot realize completely your advice, so it helps me to provide an example code of updating context value when it is intended behavior(maybe there aren't documents).

But even without getting an answer to that, i have to let you know that when using context in a struct components you yourself are responsible for the rerender of it.
When hooking into context using ctx.link().context() the context function takes a closure that gets called when your component should rerender, you just need to send a message ctx.link().send_message(Msg::MyMessageOnContextUpdate) and do the rest in the updated lidecycle method

---

Another?
I think Double written onclick is strange, but the code (like the first code block of this comment) is allowed to run. Is this intended syntax or a bug? (This isn't related to re-render. Surprisingly I could write like this.))

[voidpumpkin]

@usagrada While i am sorry you don't get a lint error, we don't have one. Please remove one of the double onclick's and leave just one, behind the scenes the second one probably overrides your first one and that is why you get no call to the update function.

[voidpumpkin]

@usagrada Sorry turns out I was uninformed myself, context() returns a handle that you have to store inside state, because as stated here:

yew/packages/yew/src/context.rs

Lines 29 to 30 in f5b9219

	/// Owns the connection to a context provider. When dropped, the component will
	/// no longer receive updates from the provider.

it will not get rerendered if you don't store it.

Here is the fixed issue.rs file:

use yew::context::ContextHandle;
use yew::{
    classes, function_component, html, use_context, Callback, Children, Component, Context,
    ContextProvider, Html, Properties,
};

#[derive(Clone)]
pub struct Provider {
    value: usize,
}

#[derive(Properties, PartialEq, Clone)]
pub struct Props {
    pub children: Children,
}

pub enum ProviderMessage {
    Msg,
}

type MyClick = yew::Callback<yew::MouseEvent>;

impl Component for Provider {
    type Message = ProviderMessage;
    type Properties = Props;

    fn create(_ctx: &Context<Self>) -> Self {
        Self { value: 0 }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            ProviderMessage::Msg => {
                log::info!("click");
                self.value += 1;
            }
        }
        true
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let onclick: MyClick = ctx.link().callback(|_| ProviderMessage::Msg);

        html! {
          <ContextProvider<MyClick> context={&onclick}>
            <ContextProvider<usize> context={self.value}>
                { ctx.props().children.clone()}
            </ContextProvider<usize>>
          </ContextProvider<MyClick>>
        }
    }
}

pub struct Page;

impl Component for Page {
    type Message = ();
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
          <div class={classes!("museum__container")}>
          <Provider>
            <div>{"struct component"}</div>
            <View />
            <div>{"functional component"}</div>
            <ViewFunc />
          </Provider>
          </div>
        }
    }
}

pub enum ViewMessage {
    UpdateOnCLick(MyClick),
    UpdateValue(usize),
}

pub struct View {
    value: usize,
    onclick: MyClick,
    _onclick_handle: ContextHandle<MyClick>,
    _value_handle: ContextHandle<usize>,
}

impl Component for View {
    type Message = ViewMessage;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        let (onclick, onclick_handle) = ctx
            .link()
            .context::<MyClick>(ctx.link().callback(ViewMessage::UpdateOnCLick))
            .expect("field to be set");
        let (value, value_handle) = ctx
            .link()
            .context::<usize>(ctx.link().callback(ViewMessage::UpdateValue))
            .expect("field to be set");
        Self {
            value,
            onclick,
            _value_handle: value_handle,
            _onclick_handle: onclick_handle,
        }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            ViewMessage::UpdateOnCLick(onclick) => self.onclick = onclick,
            ViewMessage::UpdateValue(value) => self.value = value,
        };
        true
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        let Self { onclick, value, .. } = self;

        html! {
          <div {onclick}>
            {value}
            <button>{"click"}</button>
          </div>
        }
    }
}

/// This component has access to the context
#[function_component(ViewFunc)]
pub fn view() -> Html {
    let value = use_context::<usize>().expect("no ctx found");
    let click = use_context::<MyClick>().expect("no ctx found");

    html! {
      <div onclick={click}>
        {value}
        <button>{"click"}</button>
      </div>
    }
}

[usagrada]

Thank you for your very useful answer. I overlooked the statement.
I don't know whether struct components are supported in the future, I think it is great that documents become more detailed.

Sure. Only to say, it seems that both of onclick event is called (not overrided).

While i am sorry you don't get a lint error, we don't have one. Please remove one of the double onclick's and leave just one, behind the scenes the second one probably overrides your first one and that is why you get no call to the update function.