Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить функція autorun()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке autorun()

> autorun() - це функція MobX, яка **автоматично виконує передану функцію** і **повторно запускає її за будь-якої зміни спостережуваних (observable) даних**, які використовуються всередині цієї функції.

Якщо коротко:

> autorun() **= «реактивний спостерігач»**. MobX сам визначає, від яких даних залежить твоя функція, і перезапускає її при їх зміні.

---

## 1. Приклад найпростішого використання

```javascript
import { observable, autorun } from "mobx"

const counter = observable({
  count: 0,
})

autorun(() => {
  console.log("Counter changed:", counter.count)
})

counter.count++  // → "Counter changed: 1"
counter.count++  // → "Counter changed: 2"
```

Що відбулося:

- autorun() викликав передану функцію один раз під час запуску;
- MobX проаналізував, що всередині використовується counter.count;
- за кожної зміни count функція перезапускається.

---

## 2. Як це працює під капотом

1. MobX виконує функцію один раз.
2. Відстежує всі observable, які були використані під час цього виконання.
3. Коли будь-яке з них змінюється, MobX викликає функцію знову.

Таким чином, autorun() будує граф залежностей автоматично, на відміну від reaction(), де ти явно задаєш, за чим стежити.

---

## 3. Різниця між autorun() і reaction()

| Особливість | autorun() | reaction() |
|---|---|---|
| Що відстежує | Усе, що використовується всередині функції | Лише результат функції-селектора |
| Коли викликається | Одразу під час створення | Лише за першої зміни |
| Що робить | Виконує побічні ефекти (лог, API, localStorage) | Виконує контрольовані реакції |
| Коли перезапускається | За будь-якої зміни залежностей | Лише якщо значення трекера справді змінилося |
| Контроль за залежностями | Автоматичний | Ручний |

Простими словами:

- autorun = «стеж за всім, що я використовую всередині»
- reaction = «стеж за конкретним виразом»

---

## 4. Приклад: логування стану

```javascript
import { makeAutoObservable, autorun } from "mobx"

class CartStore {
  items = []

constructor() {
    makeAutoObservable(this)

autorun(() => {
      console.log("Number of items:", this.items.length)
    })
  }

add(item) {
    this.items.push(item)
  }
}

const cart = new CartStore()
cart.add("T-shirt") // → Number of items: 1
cart.add("Jeans")   // → Number of items: 2
```

MobX відстежує, що всередині функції використовується this.items.length, і буде автоматично викликати autorun() за зміни масиву.

---

## 5. Приклад: збереження стану в localStorage

```javascript
autorun(() => {
  localStorage.setItem("settings", JSON.stringify(store.settings))
})
```

Щоразу, коли store.settings змінюється, MobX перезберігає дані.

---

## 6. Приклад: реактивний side effect із computed

```javascript
import { makeAutoObservable, autorun } from "mobx"

class Temperature {
  celsius = 25

constructor() {
    makeAutoObservable(this)

autorun(() => {
      console.log(`Temperature in F: ${this.fahrenheit}`)
    })
  }

get fahrenheit() {
    return this.celsius * 9 / 5 + 32
  }
}

const temp = new Temperature()
temp.celsius = 30 // → Temperature in F: 86
```

MobX відстежує, що fahrenheit залежить від celsius, і викликає autorun() за кожної зміни температури.

---

## 7. Особливості autorun()

- Завжди виконується один раз одразу після оголошення.
- Автоматично підписується на всі залежності, які використовуються всередині функції.
- Повертає функцію dispose() для зупинення спостереження.

---

### Приклад зупинення

```javascript
const stop = autorun(() => {
  console.log(store.count)
})

store.count++ // works
stop()         // disable
store.count++ // nothing happens
```

---

## 8. Коли використовувати autorun()

Ідеальний для побічних ефектів:

- логування, аналітика, трекінг
- синхронізація стану з localStorage / URL / API
- інтеграція MobX із зовнішніми бібліотеками (не React)

Але не рекомендується для:

- обчислень (використовуй computed),
- UI-логіки (використовуй observer).

---

## 9. Відмінність від computed

|  | computed | autorun |
|---|---|---|
| Що робить | Обчислює значення | Запускає побічний ефект |
| Кешується | Так | Ні |
| Повертає | Нове значення | Нічого |
| Залежності | Автоматично | Автоматично |
| Змінює стан | Ні | Може |

---

## 10. Візуально

```javascript
[observable] → [autorun()] → [side effect]
```

Приклад:
store.count -> autorun() -> console.log('Count:', count)

---

## ПІДСУМОК

> autorun() - це автоматичний спостерігач, який виконує функцію під час ініціалізації і за **кожної зміни** будь-яких спостережуваних даних, що використовуються всередині неї.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати643 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.