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

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

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

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)
)

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

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

Приклад 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:

виконує умову всередині реактивного контексту;
запам'ятовує, які observable-значення були використані;
при будь-якій зміні цих observable переобчислює умову;
якщо результат став 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 вперше стане істинним, і забудь про мене".

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

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

Premium

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