Reactivity & events

Two concepts make LWC feel alive: reactivity (the UI updates automatically when state changes) and events (components communicate). Getting both right is what separates a static widget from a real interactive component.

LWC is reactive by default. When a field used in the template changes, the framework re-renders the affected parts of the DOM for you — you never touch the DOM manually. Primitive fields are tracked automatically; for objects and arrays whose internal contents you mutate, you use the @track decorator (though reassigning a whole new object/array is often cleaner and does not need it). Handle user input with standard DOM event handlers wired in the template.

import { LightningElement } from 'lwc';

export default class Counter extends LightningElement {
    count = 0;                      // reactive primitive

    handleClick() {
        this.count += 1;            // reassignment triggers a re-render
    }

    notifyParent() {
        // Fire a custom event UP to a parent component
        this.dispatchEvent(new CustomEvent('countchange', {
            detail: { value: this.count }
        }));
    }
}

Communication follows a strict, predictable direction. Data flows down from parent to child through public @api properties. Events flow up from child to parent: a child calls this.dispatchEvent(new CustomEvent('name', { detail })), and the parent listens with an on<name> handler in its template. Event names must be lowercase with no spaces. For communication between components that are not in a parent-child relationship, use the Lightning Message Service instead of trying to reach sideways.

A common mistake is trying to have a child directly change a parent's data — resist it. The child emits an event describing what happened; the parent decides how to respond and updates its own state, which then flows back down. This one-way discipline keeps large component trees debuggable.

As an exercise, build a counter child that dispatches a countchange event, and a parent that listens and displays the latest value. Then add a public property so the parent can set the counter's starting number. With reactivity and events understood, the final LWC lesson connects components to real Salesforce data.