> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt
> Use this file to discover all available pages before exploring further.

# appProcess.registerOnStateChange

API reference for the appProcess.registerOnStateChange method.

Registers a callback that runs when the state of the specified app process changes.

## Usage: Listen for process state changes

```typescript
import { appProcess } from '@canva/platform';

const stateDisposer = appProcess.registerOnStateChange(
  processId,
  ({ state }) => {
    switch (state) {
      case 'opening':
        // Process is starting up
        break;
      case 'open':
        // Process is active and visible
        break;
      case 'closing':
        // Process is about to close
        // Save state, cleanup resources
        break;
      case 'closed':
        // Process has been terminated
        // Final cleanup if needed
        break;
    }
  }
);

// Later: cleanup the listener
await stateDisposer();
```

## Parameters

<Prop.List>
  <Prop name="target" required type="AppProcessId" sourceLineNumbers={[97]}>
    The ID of an app process.
  </Prop>

  <Prop name="callback" required type="OnStateChangeCallback" sourceLineNumbers={[97]}>
    The callback to run when the state of the process changes.

    **Parameters**

    <Prop.List>
      <Prop name="opts" required type="object" sourceLineNumbers={[530]}>
        Information about the state change.

        * opts.state - The state of the process.

        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>opts</strong></>}>
          <Prop.List>
            <Prop name="state" required type="ProcessState" sourceLineNumbers={[531]}>
              The state of an app process.

              The possible states include:

              * `"opening"` - The app process is opening.
              * `"open"` - The app process is open, active, and visible on the designated surface.
              * `"closing"` - The app process is closing.
              * `"closed"` - The app process has been closed and is no longer active.

              While a process is closing, it won't receive any events or messages from other processes.

              <Prop.Extras>
                **Available values**:

                * `"opening"`
                * `"open"`
                * `"closing"`
                * `"closed"`
              </Prop.Extras>
            </Prop>
          </Prop.List>
        </PillAccordion>
      </Prop>
    </Prop.List>

    **Returns**

    `void`
  </Prop>
</Prop.List>

## Returns

A disposer function that cleans up the registered callback.

() => `Promise<void>`