> 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: onChange()

## Article: onChange()

## Article Link: https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/change-events/on-change.md

## Article Content:

<!-- Source: packages/public-editor-platform-sdk/src/element/index.ts in wix-private/editor-platform -->
# onChange()

Subscribes to changes on the selected component. The callback runs whenever the component's data, styles, state, preset, or other manifest-driven values change, including changes made outside your panel, such as through an auto panel or another custom panel.

This is useful when your panel's fields overlap with fields a Wix user can also edit elsewhere, and you need your panel's UI to reflect the current value rather than the value it had when the panel opened.

`onChange()` is only available from your custom panel's own code, not from your component's own render code. Your component doesn't need it: the editor already re-renders it with updated props whenever a bound value changes.

## Syntax

```ts
function onChange(
  callback: (patch: { type: string; value: unknown }) => void
): Promise<() => void>
```

## Parameters

| Name | Type | Description |
| :---- | :---- | :---- |
| `callback` | function | Called with a `patch` object whenever the component changes. `patch.type` indicates what changed, such as `'data'`, `'styles'`, `'state'`, `'preset'`, `'props'`, `'manifest'`, `'bindings'`, or `'providers'`. `patch.value` contains the updated value. |

## Returns

`Promise<() => void>`

An unsubscribe function. Call it to stop listening for changes, for example when your panel unmounts.

## Example

```js
import { reactElements } from '@wix/editor';
import { useEffect } from 'react';

useEffect(() => {
  let active = true;
  let unsubscribe;

  reactElements.onChange((patch) => {
    if (patch.type === 'data') {
      // Update your panel's UI to reflect the new data.
    }
  }).then((unsub) => {
    // The panel may have already closed by the time this resolves.
    // Unsubscribe right away instead of leaving the listener registered.
    if (active) {
      unsubscribe = unsub;
    } else {
      unsub();
    }
  });

  return () => {
    active = false;
    unsubscribe?.();
  };
}, []);
```

## See also

- [Sync a Custom Panel with External Data](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/custom-panels/sync-a-custom-panel-with-external-data.md)
- [setData()](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/data/set-data.md)
- [setStyles()](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/styles/set-styles.md)
- [About the React Elements API](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/introduction.md)