---
url: https://lit-ui-router.dev/api/reference/hooks/UiOnParamsChanged.md
---
[lit-ui-router](../index.md) / UiOnParamsChanged

# Interface: UiOnParamsChanged

Defined in: [packages/lit-ui-router/src/interface.ts:35](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/interface.ts#L35)

Interface for components that respond to parameter changes.

When a component implements this interface, UI-Router will call the
`uiOnParamsChanged` method whenever dynamic parameter values change
without destroying and recreating the component.

## Example

```ts
class UserDetail extends LitElement implements UiOnParamsChanged {
  uiOnParamsChanged(newParams: RawParams, trans?: Transition) {
    console.log('Parameters changed:', newParams);
    // React to the new userId
    if (newParams.userId) {
      this.loadUser(newParams.userId);
    }
  }
}
```

## See

[TransitionOptions](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.transitionoptions.html)

## Methods

### uiOnParamsChanged()

```ts
uiOnParamsChanged(newParams, trans?): void;
```

Defined in: [packages/lit-ui-router/src/interface.ts:54](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/interface.ts#L54)

A UI-Router view has a Lit `Component` (see [NormalizedLitViewDeclaration.component](../types/NormalizedLitViewDeclaration.md#component)).
The `Component` may define component-level hooks which UI-Router will call at the appropriate times.
These callbacks are similar to Transition Hooks ([IHookRegistry](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.ihookregistry.html)), but are only called if the view/component is currently active.

The uiOnParamsChanged callback is called when parameter values change.

This callback is used to respond dynamic parameter values changing.
It is called when a transition changed one or more dynamic parameter values,
and the routed component was not destroyed.

It receives two parameters:

* An object with (only) changed parameter values.
  The keys are the parameter names and the values are the new parameter values.
* The [Transition](https://ui-router.github.io/core/docs/latest/classes/_transition_transition_.transition.html) which changed the parameter values.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `newParams` | [`RawParams`](https://ui-router.github.io/core/docs/latest/interfaces/_params_interface_.rawparams.html) |
| `trans?` | [`Transition`](https://ui-router.github.io/core/docs/latest/classes/_transition_transition_.transition.html) |

#### Returns

`void`