Паттерны проектирования: Наблюдатель (Observer).

Где встречается: React (события, контекст), Node.js (EventEmitter), RxJS, кастомные системы уведомлений.

🔍 Суть паттерна

Observer — это поведенческий паттерн, который позволяет объектам («наблюдателям») подписываться на события другого объекта («субъекта») и автоматически получать уведомления при изменении его состояния.

Ключевые участники:

• Субъект (Subject) — хранит список наблюдателей и уведомляет их об изменениях.
• Наблюдатель (Observer) — объект, который подписывается на события и реагирует на них.
• Интерфейс подписки — методы subscribe(), unsubscribe(), notify().

🛠 Как это работает: базовый пример на JS

💡 Реальные примеры в React

1. События компонентов (onClick, onChange и т.д.)

React внутренне использует Observer‑паттерн для обработки событий:

Как это связано с Observer:

• Button — субъект, который «уведомляет» при клике.
• handleClick — наблюдатель, реагирующий на событие.

2. Context API

Context — это реализация Observer для глобального состояния:

Разбор:

• ThemeProvider — субъект, который хранит состояние и «уведомляет» подписчиков.
• Компоненты с useContext — наблюдатели, автоматически перерисовывающиеся при изменении контекста.

🔎 Где ещё встречается в JS/TS

• Node.js EventEmitter:

• RxJS (Observables):

• Библиотеки стейта (MobX, Zustand): используют Observer для отслеживания изменений.

🧭 Зачем спрашивают на собеседовании?

1. Понимание реактивного программирования
   Как строить системы, где компоненты реагируют на изменения?
   Чем Observer отличается от Pub/Sub?
2. Оптимизация производительности
   Как избежать лишних перерисовок в React?
   Когда использовать useMemo/useCallback в контексте Observer?
3. Архитектура приложений
   Как разделить логику и UI?
   Как реализовать глобальное состояние без Redux?
4. Работа с асинхронностью
   Как обрабатывать события в реальном времени (чаты, уведомления)?
   Как отписаться от событий, чтобы избежать утечек памяти?

⚠️ Нюансы и подводные камни

• Утечки памяти
  Всегда отписывайтесь от событий (unsubscribe, removeListener).
  В React используйте useEffect с cleanup‑функцией:

• Избыточные перерисовки
  В React избегайте создания новых функций на каждом рендере:

• Синхронизация состояний
  Если несколько наблюдателей зависят от одного состояния, убедитесь, что обновления атомарны.

✅ Когда применять Observer?

• UI‑компоненты, которые должны реагировать на изменения (инпуты, чекбоксы).
• Глобальное состояние (темы, авторизация, настройки).
• Реальные события (чаты, уведомления, WebSocket‑сообщения).
• Логирование и аналитика (отправка событий в метрики).

❌ Когда не стоит использовать?

• Для простых локальных состояний (лучше useState).
• Если наблюдателей меньше 2–3 (избыточность).
• В критичных к производительности участках (дополнительные вызовы могут замедлить работу).

Что дальше?
В следующей статье разберём паттерн Singleton с примерами из React (кеширование, API‑клиенты) и TypeScript (типы, инстансы).

Если хотите углубиться в какой‑то аспект (например, сравнение с Pub/Sub или реализацию в Redux), дайте знать!