On change of designer attribute, init() handler is called again

Question

We are using lightning components in a community. We drag drop the components into a template and configure through designer attributes. For one of such lightning component, there is an init() handler written and designer attribute is of type pick list with some default value. First time on load of that component, init handler is called, and an app event is thrown from there as per expectation.

Subsequently, when I change the pick list values, this init() handler is called every time and app event is thrown every time. What could be the explanation for this? Is this expected behaviour of aura framework?

Code for reference:

Component:

<aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">

    <aura:attribute name="attribute1" Type="String"/>
    <aura:attribute name="attribute2" Type="String"/>
    <aura:attribute name="attribute3" Type="String"/>

    <aura:registerEvent name="ConfigurationEvent" type="c:ConfigurationEvent"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!--YES, THIS IS COMMENTED aura:handler name="change" value="{!v.productType}" action="{!c.changeConfig}"/-->
</aura:component>

Design file:

<design:component>
    <design:attribute name="submissionType"
                      datasource = "Landing Page, Uberflip form, Referral form" required="true" label="Submission Type" default="Landing Page"/>
    <design:attribute name="productType"
                      datasource = "Top Producer, RDC"
                      label="Product Type" required="true" default="Top Producer"/>    
</design:component>

Controller:

({
    doInit: function(component, event, helper) {

        //setSubmissionType = getSubmissionType;

        // Prepare a new record from template
        var appEvent = $A.get("e.c:ConfigurationEvent"); 
        //Set event attribute value
        appEvent.setParams({"product" : component.get('v.productType'), "submissionType" : component.get('v.submissionType'), "popUpProduct" : component.get('v.popUpProductType')});
        appEvent.fire();
    }
})

Answer 1

When you change the design attributes of a component in Community Builder or Lightning App Builder, the component is destroyed and re-created with the new values.

This makes sense because you may have written your component to expect the design attributes to be populated on creation. You may not have written any change handlers to deal with them being overwritten later.

By destroying them and re-creating them, the builder tools show you the right preview of how your component will look.