Що робить функція autorun()?

ReactJunior~2 хв читання

Що таке 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. Як це працює під капотом

MobX виконує функцію один раз.
Відстежує всі observable, які були використані під час цього виконання.
Коли будь-яке з них змінюється, 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() - це автоматичний спостерігач, який виконує функцію під час ініціалізації і за кожної зміни будь-яких спостережуваних даних, що використовуються всередині неї.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.