Salesforce LWC Cheatsheet: Core Concepts, Modern Reactivity & Best Practices Guide

In plain words: A Lightning Web Components (LWC) Cheatsheet is a quick-reference guide that brings together the most essential patterns for modern Salesforce UI development. It summarizes component architecture, lifecycle hooks, data communication, wire adapters, and styling rules so developers can build fast, standards-compliant applications without digging through hundreds of documentation pages.

Salesforce Lightning Web Components (LWC) use modern web standards like custom elements, Shadow DOM encapsulation, and ECMAScript modules to deliver enterprise-grade performance. Whether you are building complex data grids, interactive modal flows, or responsive dashboards, having the core APIs and architectural patterns readily accessible helps you write clean, maintainable code faster.

1. Component Architecture & Lifecycle Hooks

LWC provides standard decorators and lifecycle hooks to manage component instantiation, rendering, and teardown:

• @api: Exposes a public property or JavaScript method to parent components or the Lightning App Builder.
• @track: Deeply tracks mutations inside complex objects and nested arrays (primitive values in LWC are reactive by default without @track).
• connectedCallback(): Fires when a component is inserted into the DOM. Ideal for initializing state, subscribing to message channels, and fetching data.
• renderedCallback(): Executes after every render cycle. Use this hook with caution when performing DOM manipulations to avoid infinite rendering loops.
• disconnectedCallback(): Fires when the component is removed from the DOM. Essential for unsubscribing from event listeners, clearing timers, and releasing memory.
• errorCallback(error, stack): Captures unhandled errors thrown in child components, acting as an error boundary.

360 LWC Architecture Card:

• Standard Decorators: @api (public API), @wire (LDS/Apex data stream), @track (deep reactivity).
• Parent-to-Child Comm: Set public properties on the child using kebab-case in HTML (record-id={id}).
• Child-to-Parent Comm: Dispatch standard CustomEvents (this.dispatchEvent(new CustomEvent('change'))).
• Cross-DOM Comm: Lightning Message Service (LMS) across LWC, Aura, and Visualforce.

2. Data Binding, Events & Apex Integration

LWC seamlessly connects front-end templates to backend Apex controllers and the Lightning Data Service cache.

Code Example: Wire Adapter vs. Imperative Apex Invocation

import { LightningElement, api, wire } from 'lwc';
import getAccountDetails from '@salesforce/apex/AccountController.getAccountDetails';
import updateAccountStatus from '@salesforce/apex/AccountController.updateAccountStatus';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class AccountCard extends LightningElement {
    @api recordId;
    accountRecord;
    error;

    // 1. Reactive Wire Adapter Pattern (Automatic execution on property change)
    @wire(getAccountDetails, { accountId: '$recordId' })
    wiredAccount({ error, data }) {
        if (data) {
            this.accountRecord = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accountRecord = undefined;
        }
    }

    // 2. Imperative Apex Pattern (Invoked on explicit user action)
    async handleStatusUpdate() {
        try {
            await updateAccountStatus({ accountId: this.recordId, status: 'Active' });
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Account status updated to Active',
                    variant: 'success'
                })
            );
        } catch (err) {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Update Failed',
                    message: err.body ? err.body.message : err.message,
                    variant: 'error'
                })
            );
        }
    }
}

3. Lightning Data Service (LDS) Components

Salesforce provides declarative base components to read, edit, and create records with built-in Field-Level Security and caching:

• <lightning-record-form>: The fastest way to render a complete create/edit/view form using standard page layouts or explicit field arrays with zero boilerplate JavaScript.
• <lightning-record-view-form>: Renders read-only fields using custom multi-column layouts.
• <lightning-record-edit-form>: Provides complete layout flexibility while intercepting the onsubmit event for custom validation before database commits.

4. Styling with SLDS & Scoped CSS

Component stylesheets in LWC are scoped to protect against style bleed across the application:

• Shadow DOM Boundary: Styles defined in myComponent.css apply exclusively to the component markup and do not alter parent or child nodes.
• :host Selector: Targets the root custom element to configure component-level display, margins, or background themes.
• SLDS Styling Hooks: Custom CSS variables provided by the Lightning Design System (e.g., --slds-c-button-brand-color-background) that allow fine-grained theme adjustments without breaking system accessibility.

5. Performance Optimization Patterns

Core Rule: Cache read-only Apex queries with @AuraEnabled(cacheable=true), debounce fast user input streams to minimize network requests, and lazy-load data tables using server-side pagination.

• Debouncing Search Inputs: Delay API execution until the user pauses typing to prevent sending redundant requests on every keystroke.
• Conditional Rendering with Modern Directives: Use lwc:if, lwc:elseif, and lwc:else directives instead of deprecated template if:true for faster template evaluation.
• Use Key Attributes in Iterators: Always supply a unique, unchanging primitive identifier (such as record ID) to the key attribute inside for:each loops so the rendering engine can efficiently track updated DOM nodes.

6. Common Developer Traps to Avoid

Developer Trap: Direct DOM Manipulation & Imperative DML in Cacheable Apex
1. Avoid mutating the DOM manually with document.getElementById() or appendChild(); always update reactive JavaScript properties and let LWC re-render the view.
2. Methods marked with @AuraEnabled(cacheable=true) cannot execute DML operations (insert, update, delete). Attempting DML inside cacheable methods will throw a runtime exception.

Summary

Mastering Lightning Web Components requires balancing modern JavaScript standards with Salesforce platform tools. By using lifecycle hooks correctly, leveraging declarative Lightning Data Service forms, caching read queries with wire adapters, and following SLDS styling conventions, developers can build scalable, responsive, and secure user interfaces across the Salesforce ecosystem.