Ember.js: Component re-renders without changes to attributes.

[FabHof]

I have a route with a dynamic segment and a component, that displays a value of the model.

• I am on this route with dynamic segment id 1.
• When I transition to the same route but with dynamic segment id 2 via {{link-to}} the model is loaded and the re-render-hooks of the component are called (all as expected)
• When I then transtion to the same route again (id 2) via the same {{link-to}} the model is not re-loaded (ok) but the re-redner-hooks are called (not what I expected).
• When I then transtion to the same route again (id 2) via the same {{link-to}}, the re-redner-hooks are not called.

ember-twiddle

Steps to reproduce in twiddle (look at the console output):

1. Click "Goto 1" => Model loaded (OK)
2. Click "Goto 2" => Model loaded + didUpdateAttrs called (OK)
3. Click "Goto 2" => didUpdateAttrs called (NOK)
4. Click "Goto 2" => Nothing (??)

[jacobq]

That seems super weird to me. It seems that even though this.value stays the same, Ember believes component attributes have changed (and this.attrs.value is a new MutableCell object, even though its properties all look the same, and I have no idea whether or not that's significant). The router doesn't fire didTransition either, so it seems to understand that the route hasn't changed.

https://ember-twiddle.com/4a1df99fe52669fd7acb7f23da8308f3?openFiles=components.my-component.js%2C

[pixelhandler]

It seems like the value passed to link-to required the model hook to be invoked. The model hook returns a new object. Since the component is invoked {{my-component value=model.value}} with the model as an argument the reference to the model has changed since the route's model hook returns a new object. The value may be equal in the new model object but the model has changed, so I expect that didUpdateAttrs would be called.

I don't think this is a bug

[jacobq]

The model hook returns a new object.

@pixelhandler But then wouldn't we see the model hook fire again?

Controller init called
router didTransition
app template rendered
model {item_id: "1"}
router didTransition
component template rendered
model {item_id: "2"}
router didTransition
didUpdateAttrs foo null false MutableCell {__MUTABLE_CELL__ember1546048819971792883146844__: true, __REF__ember15460488199711014208206454__: NestedPropertyReference, value: "foo"} null false
didUpdateAttrs foo foo true MutableCell {__MUTABLE_CELL__ember1546048819971792883146844__: true, __REF__ember15460488199711014208206454__: NestedPropertyReference, value: "foo"} MutableCell {__MUTABLE_CELL__ember1546048819971792883146844__: true, __REF__ember15460488199711014208206454__: NestedPropertyReference, value: "foo"} false

[FabHof]

@pixelhandler But then wouldn't we see the model hook fire again?

That's also my main problem with this. It is inconsitent behaviour. Why should the rerender happen on second click, but not on third click?

[rwjblue]

didUpdateAttrs is guaranteed to be called when the arguments passed into the component changes but there is no guarantee that the arguments have been changed when it is called.

I realize that seems confusing, so let me try to rephrase. didUpdateAttrs is called if either of the following circumstances:

• When passed in arguments have changed
• Any other time 😈

[FabHof]

But shouldn't it be at least consistent?

[locks]

Apologies about the confusion behavior 😬 With the shift in focus to Glimmer components and modifiers, this issue is no longer as relevant and like mentioned above, the behavior is "by design" so I'll be closing the issue. Thanks for the discussion!