---
title: "lzb.components.PreviewServerCallback.onBeforeChange"
description: "JS action `lzb.components.PreviewServerCallback.onBeforeChange` of the Lazy Blocks WordPress plugin."
url: "https://www.lazyblocks.com/docs/js-actions/lzb-components-previewservercallback-onbeforechange/"
lastUpdated: 2026-09-09
source: "js-actions/lzb-components-previewservercallback-onbeforechange.mdx"
---
# lzb.components.PreviewServerCallback.onBeforeChange

Fires in the editor the moment a block preview response arrives, before the old markup is replaced. It is where a script tears down whatever it attached to that markup, a slider instance or an event listener on a node that is about to disappear.

The action runs on both paths, after a successful render and after a failed request, and only for the response of the newest request. A response from a request that a later one has already replaced is dropped without firing it.

## Attributes

| Name    | Type       | Description                    |
| ------- | ---------- | ------------------------------ |
| `props` | **Object** | props of the preview component |

| Name             | Type               | Description                                                                     |
| ---------------- | ------------------ | ------------------------------------------------------------------------------- |
| `block`          | **String**         | block name, for example `lazyblock/slider`                                      |
| `attributes`     | **Object \| null** | attributes sent for rendering, `null` when the caller passed none               |
| `urlQueryArgs`   | **Object**         | extra fields merged into the REST request body, `{}` by default                 |
| `onBeforeChange` | **Function**       | the component's own callback, called immediately before this action             |
| `onChange`       | **Function**       | the component's own callback for the render that follows                        |
| `withBlockProps` | **Boolean**        | whether the rendered markup is wrapped with the block props, `false` by default |
| `context`        | **Object**         | block context sent to the server                                                |
| `clientId`       | **String**         | client id of the block, passed in by the caller and forwarded untouched         |

## Usage

```js title="JS"
wp.hooks.addAction(
  "lzb.components.PreviewServerCallback.onBeforeChange",
  "my.custom.namespace",
  function (props) {
    if (props.block !== "lazyblock/slider") {
      return;
    }

    const node = document.querySelector(
      `[data-block="${props.clientId}"] .my-slider`,
    );

    if (node && node.mySlider) {
      node.mySlider.destroy();
      delete node.mySlider;
    }
  },
);
```

## Deprecated alias

`lazyblocks.components.PreviewServerCallback.onBeforeChange` fires immediately after this one, with the same single argument. It is kept so old integrations keep working. Do not add handlers to it in new code.

The markup is still on the page when this action runs, so a handler can read it. Anything that has to run against the new markup belongs in [lzb.components.PreviewServerCallback.onChange](https://www.lazyblocks.com/docs/js-actions/lzb-components-previewservercallback-onchange/) instead, which fires after React has committed it.

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt