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

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

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

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

Контент

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

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

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

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

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

## Просте визначення

> `when(predicate, effect?)` - це функція, яка **чекає**, поки умова (`predicate`) на основі observable-даних стане `true`,
> і **виконує дію (**`effect`**) один раз**, після чого **автоматично відписується**.

---

## Синтаксис

```javascript
import { when } from 'mobx'

// Варіант 1: з колбеком (імперативно)
when(
  () => condition === true,   // умова (predicate)
  () => doSomething()         // дія (effect)
)

// Варіант 2: як проміс (асинхронно)
await when(() => condition === true)
```

---

## Приклад 1 - базовий (з побічним ефектом)

```javascript
import { makeAutoObservable, when } from 'mobx'

class Store {
  data = null

constructor() {
    makeAutoObservable(this)
    this.loadData()
  }

async loadData() {
    setTimeout(() => {
      this.data = { user: 'Alex' }
    }, 2000)
  }
}

const store = new Store()

when(
  () => store.data !== null,            // чекаємо, поки з'явиться data
  () => console.log('Data is loaded:', store.data)
)
```

Що відбувається:

1. `when()` підписується на зміни всіх observable, згаданих в умові (`store.data`).
2. Поки `store.data` - `null`, нічого не відбувається.
3. Щойно `store.data` зміниться і умова поверне `true`, MobX викликає другий колбек.
4. Підписка **автоматично видаляється** - жодних витоків пам'яті.

---

## Приклад 2 - з промісом (await)

`when()` можна використовувати в стилі `async/await`:

```javascript
await when(() => store.user != null)
console.log('User is ready:', store.user)
```

Це особливо зручно, коли потрібно *дочекатися* завантаження стану (наприклад, даних з API)
і продовжити виконання логіки тільки після цього.

---

## Приклад 3 - скасування очікування

Функція `when()` повертає **деструктор (disposer)** - функцію, яка скасовує очікування, якщо воно більше не потрібне:

```javascript
const cancel = when(
  () => store.user != null,
  () => console.log('User loaded!')
)

// Якщо захотів скасувати підписку раніше
cancel()
```

---

## Реактивна природа

Коли ти викликаєш `when(() => someCondition)`, MobX:

1. **виконує умову** всередині реактивного контексту;
2. **запам'ятовує**, які observable-значення були використані;
3. при **будь-якій зміні цих observable** переобчислює умову;
4. якщо результат став `true` → викликає `effect` і знищує реакцію.

Тобто `when()` - це як "одноразовий autorun", що спрацьовує **лише один раз**, коли умова виконується.

---

## Різниця між `when`, `autorun`, `reaction`

| Функція | Спрацьовує | Повторюється | Автовідписка |
| --- | --- | --- | --- |
| `autorun(fn)` | при першому запуску і при кожній зміні залежностей | Так | Ні |
| `reaction(dataFn, effect)` | при зміні значення, яке повертає `dataFn` | Так | Ні |
| `when(predicate, effect)` | коли predicate стає `true` | Ні | Так |

---

## Приклад 4 - практичне використання

**Сценарій:** дочекатися, коли користувач авторизується.

```javascript
when(
  () => authStore.isLoggedIn === true,
  () => router.navigate('/dashboard')
)
```

MobX сам стежить за `authStore.isLoggedIn`.
Коли користувач увійшов у систему, колбек виконається, а підписка зникне.

---

## Підсумок

| Що робить | Коротко |
| --- | --- |
| `when()` | Реагує, коли умова вперше стає `true` |
| **Підписується на залежності** | Так (автоматично) |
| **Автоматично відписується** | Так |
| **Можна використовувати з async/await** | Так |
| **Повертає disposer** | Так |
| **Типові кейси** | очікування завантаження даних, авторизації, прапорців стану |

---

### Коротка формула:

> `when()` = "*Виконай щось, коли X вперше стане істинним, і забудь про мене*".

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

Для рев’юера

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

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