LWC Best Practices - MCP Knowledge

Based on Real Implementation Experience: These practices are aligned with official MCP guidance and production LWC architectures.

Overview

This guide summarizes best practices for:

• Component structure and responsibility
• Decorator usage (@api, @wire)
• Event handling and communication
• State management and error handling

Prerequisites

• Required Knowledge:
  • LWC component model
  • JavaScript classes and modules
• Recommended Reading:
  • LWC Patterns - Higher-level patterns
  • LWC Development Guide - Workflows and processes

When to Use

Use This When

• Designing new LWCs
• Reviewing existing LWC code
• Creating reusable component libraries

Core Concepts

Single Responsibility Components

• Each component should have one primary responsibility
• Use child components for reusable UI pieces

Decorator Usage

• @api: Public properties and methods (stable contract)
• @wire: Reactive data and services

Event Handling

• Use CustomEvent for parent-child communication
• Use Lightning Message Service for cross-hierarchy communication

Patterns and Examples

Pattern 1: Container-Presenter

• Container components handle data fetching and orchestration
• Presenter components handle rendering and interaction

Pattern 2: Service Modules

• Extract logic into plain JS service modules (formatting, mapping)
• Keep components focused on UI concerns

Edge Cases and Limitations

• Overusing @track (not needed in modern LWC)
• Mutating properties directly instead of reassigning

Related Patterns

• LDS Patterns - Data access best practices
• LWC Accessibility - Accessibility best practices

Q&A

Q: How many responsibilities should a single LWC have?

A: Ideally one primary responsibility. If a component handles data fetching, complex logic, and complex UI, consider splitting it into container and presenter components for maintainability.

Q: When should I use @wire vs imperative Apex?

A: Use @wire for reactive data needs (auto-refresh, record pages). Use imperative Apex for user-triggered actions (button clicks) or when you need more control over timing and error handling.