Lightning Components: declare attributes or get the values from the DOM?

Question

The question is fairly simple, but I haven't found any answers on the web.

At the moment I have found two ways of getting the UI's values:

1. Setting up an <aura:attribute type='Object' name='myName' /> and then using the component.get('v.myName') to get its value.

2. Give an aura:id to each UI component to later do component.find('myAuraId').get('v.value').

Obviously, most of the times it's much faster to simply use the aura:id method, but one part of me thinks it's less performant due to the fact that it's a find. So, in a nutshell, which one is a best? Or is one better than the other for different scenarios?

Answer 1

get is faster than find and then get, simply because the latter requires calling two methods while the former only requires one method. In addition, find may return either no values (null), one value (a SecureComponent), or multiple values (an Array), so you might need to introduce additional logic depending on your component's design, while get will always return exactly what you ask for (typically, whatever the type of the attribute is, or null), instead of three different possibilities.

However, both methods run very quickly (sub-ms times), so it's hard to measure precisely unless you're dealing with many thousands of times, and even then, the rendering and event propagation times dwarf the time it takes to deal with either get or find. Instead, I offer the following piece of advice: if you're dealing with a value, use get, and if you're dealing with altering a component or calling an aura:method, use find. This will simply allow your code to be cleaner, since you'll be able to read the code for both your component and controller and immediately understand what's going on.