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

# Class: RouterReactionController\<T>

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

A [ReactionController](ReactionController.md) preselected on the router: observes the
[RouterStore](RouterStore.md) of the router the host's nearest provider supplies.

On `hostConnected` it requests the router over the `context-request`
protocol, so `<ui-router>`, `<ui-view>`, a `@lit/context` `ContextProvider`
of `routerContext` and `provideRouter` all answer. There is no prop drilling and no store wiring in
router configuration: [RouterStore.for](RouterStore.md#for) attaches lazily on first use.
It then runs a MobX `reaction` over the selector while the host is
connected. When the provider hands it a new router, it rebinds to that
router's store:

```ts
class App extends LitElement {
  private active = new RouterReactionController(
    this,
    (route) => route.includes('admin.**'),
  );

  render() {
    return html`...${this.active.value ? 'admin' : ''}...`;
  }
}
```

The reaction fires immediately on every (re)connect, so sticky routed
components resynchronize with the current route instead of rendering
stale values. If no provider answers (and no explicit `router` option is
given), the controller is a no-op until reconnected under one.

## Type Parameters

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

## Implements

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

## Constructors

### Constructor

```ts
new RouterReactionController<T>(
   host, 
   selector, 
   options?
): RouterReactionController<T>;
```

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

#### Parameters

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

#### Returns

`RouterReactionController`<`T`>

## Properties

| Property | Type | Description | Defined in |
| ------ | ------ | ------ | ------ |
|  `store?` | [`RouterStore`](RouterStore.md) | The observed store; set while connected to a router context. | [lit-ui-router-mobx/src/router-reaction-controller.ts:59](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router-mobx/src/router-reaction-controller.ts#L59) |
|  `value` | `T` | The selected value, for use in `render()`. | [lit-ui-router-mobx/src/router-reaction-controller.ts:56](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router-mobx/src/router-reaction-controller.ts#L56) |

## Methods

### hostConnected()

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

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

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/router-reaction-controller.ts:91](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router-mobx/src/router-reaction-controller.ts#L91)

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`