CP as observers raise deprecation "Twice modifications of a property in a single render"

1

Hi!

I’m trying to get used to use computed properties as observers but I’m getting one deprecation that is very confusing to me. This is the scenario ( JS Bin - Collaborative JavaScript Debugging ):

I have a controller, a component and another component inside the previous one. When a button is clicked in the controller, a property is set to true and this ‘travel’ all the way down to the inner component. Then, the component detect it using a computed property as an observer and send up an action to notify the controller that now it can hide the components (by setting to false a property areComponentsVisible).

There are two things that I don’t understand:

  1. the computed property that I’m using as observer (detectChangeOnButtonClicked) doesn’t react if it isn’t written in the template of the inner component
  2. when I click the button in the controller, the action sended from the inner controller modify the areComponentsVisible property twice in a single render, as a deprecation message informs me.

Do you have any idea about why this is happening?

2

It’s happening because you are mutating the state of the document twice in a single render :wink:

When you initiate from the component, flow is goes like this

click => closeAction => switch => toggle components

But when you initiate from the controller, your flow becomes this

click => clickOnBut => toggleProperty => computedDidChange (2x) => switch (2x) => toggle components (2x)

3

Sorry, but I still don’t get it. If toggleProperty only toggle a property once, why is it computed two times? :neutral_face: