{"id":12232,"date":"2026-01-21T05:51:04","date_gmt":"2026-01-21T05:51:04","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=12232"},"modified":"2026-01-20T05:58:42","modified_gmt":"2026-01-20T05:58:42","slug":"the-mediator-pattern-in-lwc-how-sibling-components-really-communicate","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2026\/01\/21\/the-mediator-pattern-in-lwc-how-sibling-components-really-communicate\/","title":{"rendered":"The Mediator Pattern in LWC: How Sibling Components Really Communicate"},"content":{"rendered":"\n<p>Sibling component communication is one of the most confusing topics for developers working with Lightning Web Components (LWC). At first glance, it feels natural to expect sibling components to communicate directly with each other. When that doesn\u2019t work, many developers immediately reach for <strong>Pub-Sub<\/strong>, often without fully understanding the long-term implications.<\/p>\n\n\n\n<p>Salesforce encourages a more structured and scalable communication approach where the parent component acts as the coordinator. This design approach is known as the <strong>Mediator Pattern<\/strong>, and it is the recommended, enterprise-grade solution for sibling communication in LWC.<\/p>\n\n\n\n<p><strong>Let\u2019s Learn with a Real-Time Example<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Business Scenario<\/mark><\/strong><\/h2>\n\n\n\n<p>Imagine you are building a Lightning page that includes the following components:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Account List<\/strong> \u2013 Displays a list of Accounts<\/li>\n\n\n\n<li><strong>Account Details<\/strong> \u2013 Displays details of the selected Account<\/li>\n<\/ul>\n\n\n\n<p>When a user selects an Account from the list, the <strong>Account Details<\/strong> component should update automatically.<\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2026\/01\/Component-hierarchy1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2026\/01\/Component-hierarchy1.png\" alt=\"Component Hierarchy\"><\/a><\/center><font size=\"2\"><center><i>Component Hierarchy<\/i><\/center><\/font>\n\n\n\n<p>Even though <strong>Account List<\/strong> and <strong>Account Details<\/strong> are sibling components, they cannot communicate directly. Instead, the <strong>parent component mediates the communication<\/strong> between them.<\/p>\n\n\n\n<p><strong>Step 1: Account List (Sibling A &#8211; Event Emitter)<\/strong><\/p>\n\n\n\n<p>The Account List component fires a custom event when an Account is selected.<\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2026\/01\/accountList2.js.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2026\/01\/accountList2.js.png\" alt=\"accountList.js\"><\/a><\/center><font size=\"2\"><center><i>accountList.js<\/i><\/center><\/font>\n\n\n\n<p><strong>Step 2: Parent Component &#8211; Mediator<\/strong><\/p>\n\n\n\n<p>The parent component listens to the custom event fired by the Account List component. It stores the selected Account Id and then passes that value down to the Account Details component.<\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2026\/01\/parent.html3_.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2026\/01\/parent.html3_.png\" alt=\"parent.html\"><\/a><\/center><font size=\"2\"><center><i>parent.html<\/i><\/center><\/font>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2026\/01\/parent.js4_.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2026\/01\/parent.js4_.png\" alt=\"parent.js\"><\/a><\/center><font size=\"2\"><center><i>parent.js<\/i><\/center><\/font>\n\n\n\n<p>This is the <strong>Mediator Pattern in action<\/strong>.<br>The parent:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Acts as the central coordinator<\/li>\n\n\n\n<li>Maintains shared state<\/li>\n\n\n\n<li>Controls data flow between sibling components<\/li>\n<\/ul>\n\n\n\n<p><strong>Step 3:<\/strong> <strong>Account Details (Sibling B &#8211; Consumer)<\/strong><\/p>\n\n\n\n<p>The <strong>Account Details<\/strong> component receives the Account Id from the parent using a public <strong>@api property<\/strong>. <\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2026\/01\/accountdetails.js5_.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2026\/01\/accountdetails.js5_.png\" alt=\"accountDetails.js\"><\/a><\/center><font size=\"2\"><center><i>accountDetails.js<\/i><\/center><\/font>\n\n\n\n<p>Whenever the value changes in the parent, the Account Details component updates automatically.<\/p>\n\n\n\n<p>This component:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Has no dependency on the Account List component<\/li>\n\n\n\n<li>Remains reusable and testable<\/li>\n\n\n\n<li>Automatically reacts to data changes<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>Why the Mediator Pattern Works So Well<\/strong><\/mark><\/h2>\n\n\n\n<p>The Mediator Pattern simplifies sibling communication by letting the parent component manage shared data. Sibling components remain independent, making the code easier to debug, extend, and reuse.<\/p>\n\n\n\n<p>Because data flows in a single, predictable direction, applications built with this pattern are easier to scale and align perfectly with <strong>LWC best practices<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Conclusion<\/mark><\/strong><\/h2>\n\n\n\n<p>In Lightning Web Components, sibling components should never communicate directly with each other. All communication should flow through the parent component, which serves as the mediator.<\/p>\n\n\n\n<p>By using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Custom Events<\/strong> for child-to-parent communication<\/li>\n\n\n\n<li><strong>@api properties<\/strong> for parent-to-child data binding<\/li>\n<\/ul>\n\n\n\n<p>Developers can create applications that are clean, maintainable, and scalable.<\/p>\n\n\n\n<p>The <strong>Mediator Pattern<\/strong> is the recommended best practice for sibling communication in LWC and represents the gold standard for building robust, enterprise-grade component architectures in Salesforce.<\/p>\n\n\n\n<p>By following the above blog instructions, you will be able to learn <strong>\u201cThe Mediator Pattern in LWC: How Sibling Components Really Communicate\u201c<\/strong>. If you still have queries or any related problems, don\u2019t hesitate to contact us at <a href=\"mailto:salesforce@greytrix.com\" target=\"_blank\" rel=\"noreferrer noopener\">salesforce@greytrix.com<\/a>. More details about our integration product are available on <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">our website<\/a> and <a href=\"https:\/\/appexchange.salesforce.com\/appxListingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noreferrer noopener\">Salesforce AppExchange<\/a>.<\/p>\n\n\n\n<p>We hope you may find this blog resourceful and helpful. However, if you still have concerns and need more help, please contact us at <a href=\"mailto:salesforce@greytrix.com\" target=\"_blank\" rel=\"noreferrer noopener\">salesforce@greytrix.com<\/a>.<\/p>\n\n\n\n<p style=\"text-align: justify\"><b>About Us<\/b><\/br>\n<p><a href=\"https:\/\/www.greytrix.com\/\">Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.<br><br> Greytrix has some unique solutions for Cloud CRM such as <a href=\"\">Salesforce Sage integration<\/a> for <a href=\"https:\/\/www.greytrix.com\/sage-x3-erp\/integration\/\">Sage X3<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-100-integration\/\">Sage 100<\/a> and <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-300-integration\/\">Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Salesforce customization and development services<\/a> along with services such as Salesforce <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/data-migration-support\/\">Data Migration<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU&#x2122; integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on <a href=\"https:\/\/appexchange.salesforce.com\/appxListingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noopener\">Salesforce AppExchange<\/a>.<br> The GUMU&#x2122; Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.<br><br> For more information on our Salesforce products and services, contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\n<p><strong>Related Posts<\/strong><a href=\"https:\/\/thesalesforcedev.in\/2025\/05\/14\/how-to-prevent-recursion-in-apex-triggers-in-salesforce-best-practices-explained\/\" target=\"_blank\" rel=\"noopener\"><\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2025\/11\/26\/child-to-parent-communication-in-lwc-a-complete-guide-part-1\/#respond\" target=\"_blank\" rel=\"noreferrer noopener\">Child-to-Parent Communication in LWC \u2013 A Complete Guide (Part 1)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2025\/12\/22\/parent-to-child-communication-in-lwc-a-complete-guide-part-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Parent-to-Child Communication in LWC \u2013 A Complete Guide (Part 2)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2024\/02\/16\/how-to-invoke-an-lwc-component-function-from-aura-component\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Invoke an LWC Component Function from Aura Component<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Sibling component communication is one of the most confusing topics for developers working with Lightning Web Components (LWC). At first glance, it feels natural to expect sibling components to communicate directly with each other. When that doesn\u2019t work, many developers immediately reach for Pub-Sub, often without fully understanding the long-term implications. Salesforce encourages a more\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2026\/01\/21\/the-mediator-pattern-in-lwc-how-sibling-components-really-communicate\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[2751,2750,2755,2747,2756,2745,2748,2753,2752,2757,2749,2746,2754],"class_list":["post-12232","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-api-properties-lwc","tag-custom-events-in-lwc","tag-enterprise-lwc-design-pattern","tag-lightning-web-components-best-practices","tag-lwc-event-handling","tag-mediator-pattern-in-lwc","tag-parent-child-communication-lwc","tag-pub-sub-alternative-lwc","tag-salesforce-component-communication","tag-salesforce-frontend-development","tag-salesforce-lwc-architecture","tag-sibling-component-communication-lwc","tag-ui-architecture-salesforce"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/12232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=12232"}],"version-history":[{"count":9,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/12232\/revisions"}],"predecessor-version":[{"id":12300,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/12232\/revisions\/12300"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=12232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=12232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=12232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}