Observer pattern

The Observer Pattern is a behavioral design pattern that establishes a one-to-many dependency between objects, where changes in one object (the subject or observable) trigger updates in other objects (observers) automatically. This pattern allows objects to communicate and stay synchronized without needing to be tightly coupled.

Rx observables & React useEffect are good examples of this

An example below

In the below example, balance is rendered on a div that's not controlled or rendered by any of the client components. But balance rendering inside the div is still updated whenever there is a change on balance.
This is because balance div observes for changes on base BankAccount instance changes & re-renders upon updates.

account.attachUpdateListener((x) => {
    balanceEl.textContent = account.balance.toString();
  });
}

You can play around with an example in your console. You can access the BankAccount through global BankAccount

1. Let's create new handler for updates that logs all transactions.
2. Run createBankAccount().attachUpdateListener(x => console.log(x))`
3. Trigger some deposit & withdraw actions through buttons in UI & view the logs in console