# The stateManager.removeListener() method
This documents the `stateManager.removeListener()` method.

There are multiple parameters for this method, and a deeper dive into each of them can be found in the [Events -> Introduction page](/documentation#Events/6-events-intro) and all of the pages within the Events category.


## How can you remove a listener?
Generally, the format is just:
```ts
taClient.stateManager.removeListener('eventType', () => {
    // callback function
})
```
or
```ts
async function handleEvent(params) {
    // code here
}

taClient.stateManager.removeListener('eventType', handleEvent);
```

Essentiallly both are the same thing. The point is that they both remove a listener added by `taClient.stateManager.on()` or `taClient.stateManager.once()`. 

Find documentation on how to add a listener at the [State Manager -> On page](/documentation#State%20Manager/2-stateManager-on)

I will provide an example from ShyyTAUI which listens to the `matchDeleted` and `matchUpdated` events.
```ts
// This is triggered when the component is destroyed
onDestroy(() => {
    // Remove the listeners that were added on mount
    client.stateManager.removeListener('matchUpdated', handleMatchUpdated);
    client.stateManager.removeListener('matchDeleted', handleMatchDeleted);
});

// This is triggered when the component is loaded
onMount(async() => {
    if ($authTokenStore) {
        // Using stateManger listen to global changes to our match
        client.stateManager.on('matchDeleted', handleMatchDeleted);
        client.stateManager.on('matchUpdated', handleMatchUpdated);
    } else {
        window.location.href = "/discordAuth"
    }
});

// Handle match events
// Handle when a match is updated. This happens when a new map is set, or something about the match chages like authorised users
async function handleMatchUpdated(params: [Match, Tournament]) {
    // Log the request for debugging and clarity
    console.log("Match updated:", params);
    // Check if the updated match guid is the same as the match we are in-s guid
    if (params[0].guid === matchGuid) {
        // If it is, update the match variable to ensure that we see the latest data
        match = params[0];
        // Since the song might have changed, let's refresh the song data(from BeatSaver)
        await refreshMatchDetails(params[0]);
    }
}

// Handle when a match is deleted
function handleMatchDeleted(params: [Match, Tournament]) {
    // Just log the packet in console to ensure that I know what is happening
    console.log("Match deleted:", params);
    // Check if the match that got deleted was the one the user was just in
    if (params[0].guid === matchGuid) {
        // If yes then navigate back to the create or join match screen without resetting the state
        goto(`/tournaments/${tournamentGuid}`);
    }
}
```
<div class="info-box">
    <span class="material-icons">info</span>
    <div>
        <strong>Example:</strong> This is an example from the page of ShyyTAUI within the match cordination page. 
    </div>
</div>

You would usually want to use this method when you unload a component or switch screens. But there is not much mor eto say about it.