PE-16253

README.md

PE-16253

Problem:

Uncaught Error: You modified ShouldDisplay(dependencyCycles) twice in a single render. This was unreliable in Ember 1.x and will be removed in Ember 3.0

Upstream discussion:

• emberjs/ember.js#13948

Possible causes:

1. In init, didInitAttrs, didReceiveAttrs, willInsertElement or willRender your code calls something that affects already rendered part of template

Live demo:

• https://ember-twiddle.com/1456540706206c715aed31726dd12629?openFiles=README.md%2Ctemplates.components.my-bar.hbs
• Open JS console to see the code flow.

Possible fixes:

1. Move your code from willInsertElement to didInsertElement, etc...

• Maybe this introduces flickering?
• Causes A property of X was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation.

1. Do not write code that changes itself on initial render. If you want to send action during inital render, there should be way to rewrite the code to be computed property.

components.my-bar.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.my-foo.js

import Ember from 'ember';

export default Ember.Component.extend({
  willInsertElement: function () {
 		console.log('willInsertElement of my-foo is called and fires action to it\'s parent');
    this.sendAction('hideIt');
  }
  
  // Causes: A property of X was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation. 
  // didInsertElement: function () {
 	// 	console.log('didInsertElement of my-foo is called and fires action to it\'s parent');
  //   this.sendAction('hideIt');
  // }
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  isBarVisible: true,
  
  actions: {
    hideBar: function () {
      console.log('Parent gets the action and hides my-bar');
      this.set('isBarVisible', false);
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

{{log "In our template, we have my-bar rendered first"}}
{{#if isBarVisible}}
	{{log "At first my-bar is visible"}}
	{{my-bar}}
{{/if}}

{{log "Then we want to render my-foo"}}
{{my-foo hideIt=(action "hideBar")}}

templates.components.my-bar.hbs

Hi, I'm bar!

templates.components.my-foo.hbs

Hello, I'm foo!

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "1.13.13",
    "ember-data": "2.7.0",
    "ember-template-compiler": "1.13.13"
  },
  "addons": {}
}