---
url: >-
  https://lit-ui-router.dev/reference/lit-ui-router-mobx/classes/ReactionController.md
---
[lit-ui-router-mobx](../index.md) / ReactionController

# Class: ReactionController\<T>

Defined in: [lit-ui-router-mobx/src/reaction-controller.ts:49](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router-mobx/src/reaction-controller.ts#L49)

A ReactiveController that composes MobX with the Lit lifecycle: it runs a
MobX `reaction` over an explicit selector while the host is connected and
calls `host.requestUpdate()` when the selected value changes.

This is a selector-based alternative to render auto-tracking mixins such
as [`MobxLitElement`](https://github.com/adobe/lit-mobx):

* No base class required — works on any LitElement (or other host).
* Dependencies are explicit: the selector names exactly which observables
  drive the host, and a structural `equals` comparer gives precise,
  value-based change detection.
* Lifecycle is automatic: the reaction is created in `hostConnected` and
  disposed in `hostDisconnected` — no manual disposer bookkeeping.
* The reaction fires immediately on (re)connect, so hosts that re-enter
  the DOM (e.g. sticky routed components) synchronize with the current
  store state instead of rendering stale values.

The selected value is exposed as `.value` for use in `render()`.

## Type Parameters

| Type Parameter |
| ------ |
|  `T` |

## Implements

* [`ReactiveController`](https://lit.dev/docs/api/controllers/#ReactiveController)

## Constructors

### Constructor

```ts
new ReactionController<T>(
   host, 
   expression, 
   options?
): ReactionController<T>;
```

Defined in: [lit-ui-router-mobx/src/reaction-controller.ts:55](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router-mobx/src/reaction-controller.ts#L55)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `host` | [`ReactiveControllerHost`](https://lit.dev/docs/api/controllers/#ReactiveControllerHost) |
| `expression` | () => `T` |
| `options?` | [`ReactionControllerOptions`](../interfaces/ReactionControllerOptions.md)<`T`> |

#### Returns

`ReactionController`<`T`>

## Properties

| Property | Type | Description | Defined in |
| ------ | ------ | ------ | ------ |
|  `value` | `T` | the selected value as of the last reaction; read it in `render()` | [lit-ui-router-mobx/src/reaction-controller.ts:51](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router-mobx/src/reaction-controller.ts#L51) |

## Methods

### hostConnected()

```ts
hostConnected(): void;
```

Defined in: [lit-ui-router-mobx/src/reaction-controller.ts:65](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router-mobx/src/reaction-controller.ts#L65)

Called when the host is connected to the component tree. For custom
element hosts, this corresponds to the `connectedCallback()` lifecycle,
which is only called when the component is connected to the document.

#### Returns

`void`

#### Implementation of

`ReactiveController.hostConnected`

***

### hostDisconnected()

```ts
hostDisconnected(): void;
```

Defined in: [lit-ui-router-mobx/src/reaction-controller.ts:77](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router-mobx/src/reaction-controller.ts#L77)

Called when the host is disconnected from the component tree. For custom
element hosts, this corresponds to the `disconnectedCallback()` lifecycle,
which is called the host or an ancestor component is disconnected from the
document.

#### Returns

`void`

#### Implementation of

`ReactiveController.hostDisconnected`