Reactivity in LWC

Let's understand the concept of reactivity in LWC

All the properties in LWC by default are reactive.

Let me explain! if I were to update a property in a JavaScript controller, if the property is used at multiple places in the template file, then all the multiple occurrences will be automatically updated.

This is what happens in the backend. When the property in the JavaScript controller is updated and if the property is used in the template file then the complete template file re-renders.

So, as I said earlier, if I were to update a property in JavaScript controller and if it's used at multiple places in the template file, once the property is updated the complete template file re-renders and in that process property that's used at multiple places will be updated as well.

This is what is the concept of reactivity.

For some reason, if the property is updated but not used in the template file then the template file will not be re-rendered.