How to detect what changed in array in Ember.js?

I'm on Ember 2.12.

I have an array selectedDays: [Object] in the controller that is passed to component. component has an array like monthDays: [Object]. Objects in component need to have selected property set if they can be found in the array from controller.

The problem is comparing objects is very costly, based on Moment library method (moment1.isSame(moment2, 'day')). So right now when I add something to selectedDays array, every object in monthDays needs to be compared with every object in selectedDays. This can be hundreds or thousands of costly comparisons.

The monthDays always have 42 length (6 weeks) but selectedDays can be tens or hundreds.

I wonder is it possible to optimize that without some bruteforce custom sorting/finding optimization.

The simplest solution would be: on controller array change, check what exactly changed and modify only one day that matches the change. But as far as I know:

• you can't send an action from controller to component
• array observers don't "know" what exactly changed in array (?)

What other options do I have?

I set up an Ember Twiddle where there's visible 200-300ms delay every time you click a day before it becomes selected. http://ift.tt/2pb1NU7