What is Unbound Expression in Aura Components?

One of the major advantages of Aura Components is the presence of the concept of Reactivity.

When data is sent down the components using Attributes and when data is changed in the child component that gets updated in the parent component too. That's the concept of reactivity.

There might be a scenario where you might not need the concept of reactivity. As in, when the data is changed in the child components you might not the updated data in the other components.

How can we achieve something like that?

Can we achieve something like that or should we go ahead with the assumption that something like that is not possible to achieve in Aura Components?

The answer is a big YES! We can achieve something like that.

Let me show you how to do it.

Let's take a sample snippet where the concept of reactivity is active.

<aura:component>
  <c:child-component message="HEY!!!"></c:child-component>
  {! v.message }  
</aura:component>

This is the child component.

<aura:component>
  <aura:attribute name="message" type="String" />
</aura:component>

This is the controller of the child component.

handleReactivity : function(component, event, helper){
    component.set( 'v.message', 'HELLO!!!');
}

In the above code when the content of message is changed in child component it gets reflected in the parent component too.

Now let me show you how to switch off the reactive behaviour in Aura Components.

Again, this here is the parent component.

<aura:component>
  <c:child-component message="HEY!!!"></c:child-component>
  <!-- Notice the # it's not !, this is going to make sure message isn't reactive  -- >
  {# v.message }  
</aura:component>

This is the child component where the value of the attribute is being changed.

<aura:component>
  <aura:attribute name="message" type="String" />
</aura:component>

The value of the attribute is being changed here.

handleReactivity : function(component, event, helper){
    component.set( 'v.message', 'HELLO!!!');
}

Hope this is helpful!