# Паттерн наблюдатель

В жизни часто возникает необходимость узнать о каком-то событии одним из самых первых. Например, колокольчик на youtube позволяет получить оповещение о выходе нового видео на вашем любимом канале. Или оповещения об обновлении операционной системы. И таких примеров огромное множество. Данная задача настолько повсеместна, что для ее решения в программировании был сформирован паттерн **Наблюдатель**. Не нужно думать о паттерне как о чем-то сложном и волшебном, это просто подход к решению часто возникающих задач.

Давайте разберем, как же программа понимает что нам необходимо сообщить о том или ином событии и как это связанно с **Наблюдателем**. Если задуматься, то при клике на колокольчик в youtube, происходит подписка на изменение контента на определенном канале. Именно это слово лежит в корне данного паттерна. Когда происходит подписка на канал, то вы заноситесь в список подписчиков на оповещение о выходе новых видео. Теперь в момент добавления видео программа возьмет список подписчиков и пройдется по каждому из них, отослав оповещение.

В данном примере подписчик это пользователь, а действие которое выполняется это - оповещение. Но если пойти дальше, то можно увидеть, что подписчиком может быть любая сущность, а действием любая функция(в рамках программирования такая функция называется коллбек). То есть при каждом изменении компонент вызовет коллбек каждого из подписчиков.

Очень хорошее объяснение этого патерна можно посмотреть на [refactoringGuru](https://refactoring.guru/ru/design-patterns/observer).

В `StartupJS` каждый компонент имеет обертку `observer`. Это HOF (Higher Order Function), который добавляет реактивность в компонент. Данная функция и является наблюдателем, который следит за изменениями всех значений из  `FunctionalComponent` (смотри пример ниже) связанных с базой данных, более подробно смотреть раздел [ShareDB](/docs/tutorial/ShareDBHooks). То есть компонент обернутый в `observer` реактивно реагирует на каждое изменение в базе данных. Таким образом в `FunctionalComponent` всегда актуальная информация.

В общем виде это выглядит так:
```jsx
observer(FunctionalComponent, options)
```

`options` может принимать следующие значения:
  - `forwardRef` если передано, то компонент оборачивается в `React.forwardRef`
  - `suspenseProps`:
    - `fallback` React-компонент, который отображается, пока происходит загрузка компонента

```jsx
import {observer, useDoc} from 'startupjs'

export default observer(function User ({userId}) {
  const [user, $user] = useDoc('users', userId)
  return (
    <input
      value={user.name}
      onChange={e => $user.set('name', e.target.value)}
    />
  )
})
```