> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: onLayerStateChange()

## Article: onLayerStateChange()

## Article Link: https://dev.wix.com/docs/sdk/host-modules/dashboard/on-layer-state-change.md

## Article Content:

# onLayerStateChange()

Registers a `layerStateChange` event handler for a dashboard page, modal, or plugin [extension](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/about-dashboard-extensions.md). This allows you to refresh a component's data when it becomes active, or pause resource intensive operations when the component is running in the background.

`onLayerStateChange()` accepts a callback that's triggered whenever the extension moves from the foreground to the background, or vice versa. For example, this can happen when a Wix user opens or closes a [modal](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-modals/about-dashboard-modals.md).

## Method Declaration
```ts
(callback: (state: 'foreground' | 'background') => void) => { remove: () => void; };
```

## Parameters

| Name       | Type                     | Description                                                                                                                                                            |
|:-----------|:-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `callback` | Function | Called when the `layerStateChange` event fires. The function receives the extension's new layer state, `"foreground"` or `"background"`, as an argument. |

## Returns
```ts
{ remove: () => void; }
```

An object containing a method called `remove()`. Calling this method removes the `onLayerStateChange` event handler. 

## Examples

> **Note:** To call this method in [self-hosted apps](https://dev.wix.com/docs/sdk/articles/get-started/about-self-hosted-apps.md), you need to create a [client](https://dev.wix.com/docs/sdk/articles/set-up-a-client/about-the-wix-client.md). See the [setup](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md#setup) guide for more details.

### Refresh data when component comes to the foreground
> **Note:** This example calls [`dashboard.onBeforeUnload()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/on-before-unload.md) to demonstrate use of the `remove()` function.

```js
import { dashboard } from '@wix/dashboard';
import { refreshData } from './data-retrieval.js'

const { remove } = dashboard.onLayerStateChange((state) => {
  if (state === 'foreground') {
    refreshData();
  }
});

// Remove the onLayerStateChange handler when the `beforeUnload` event is triggered.
dashboard.onBeforeUnload(() => {
  remove();
})
```