Notification on state change in LLD - System Design Guide

Problem Statement

When a system's internal state changes, failing to notify interested parts leads to stale data, inconsistent behavior, and poor user experience. Without a clear mechanism to broadcast these changes, components remain unaware and cannot react promptly.

Solution

This pattern uses a mechanism where components interested in state changes register themselves as observers. When the state changes, the system automatically notifies all registered observers, allowing them to update or react accordingly without tight coupling.

Architecture

Subject

→Observer 1

↓

→Observer 2

↓

Notify all registered observers

This diagram shows a Subject holding state and multiple Observers registered to it. When the Subject's state changes, it notifies all Observers.

Trade-offs

✓ Pros

→

Decouples state management from components reacting to changes.

→

Allows multiple observers to react independently to the same state change.

→

Simplifies adding or removing observers without changing the subject.

✗ Cons

→

Can lead to performance issues if many observers are notified frequently.

→

Risk of observers causing side effects or cascading updates if not managed carefully.

→

Debugging can be harder due to indirect communication between components.

Use when multiple components need to react to changes in shared state, especially in UI frameworks or event-driven systems with moderate to high complexity.

Avoid when the system has very few components or when state changes are rare and simple direct calls suffice.

Real World Examples

Netflix

Uses observer-like patterns in their UI to update video player controls and recommendations when playback state changes.

Uber

Notifies different parts of the app when ride status changes, such as driver arrival or trip completion.

LinkedIn

Updates user feeds and notifications in real-time when new posts or messages arrive.

Code Example

The before code shows a state holder that changes state without notifying anyone. The after code implements the observer pattern where observers register to the subject and get notified automatically when the state changes.

LLD

### Before: No notification on state change
class StateHolder:
    def __init__(self):
        self._state = None

    def set_state(self, value):
        self._state = value


class Observer:
    def update(self, value):
        print(f"Observer received new state: {value}")


state_holder = StateHolder()
observer = Observer()

state_holder.set_state(10)  # Observer is not notified


### After: Observer pattern implemented
class Subject:
    def __init__(self):
        self._state = None
        self._observers = []

    def register(self, observer):
        self._observers.append(observer)

    def unregister(self, observer):
        self._observers.remove(observer)

    def notify(self):
        for observer in self._observers:
            observer.update(self._state)

    def set_state(self, value):
        self._state = value
        self.notify()


class Observer:
    def update(self, value):
        print(f"Observer received new state: {value}")


subject = Subject()
observer = Observer()
subject.register(observer)
subject.set_state(10)  # Observer is notified and prints the new state

Alternatives

Polling

Components repeatedly check the state at intervals instead of being notified.

Use when: Use when state changes are infrequent or when push notifications are not feasible.

Callback Functions

Directly pass functions to be called on state change instead of a formal observer registration.

Use when: Use in simple cases with few observers and straightforward state changes.

Summary

Notification on state change prevents components from missing important updates by informing them automatically.

It decouples the state holder from the components that react, improving modularity and flexibility.

This pattern is widely used in UI frameworks and event-driven systems to keep components synchronized.