# @stateListener

This decorator register component method on component did mount as state listener in eventrix and unregister when component will unmount.

{% hint style="info" %}
"eventrixComponent" decorator is required if You want use any of eventrix component decorators
{% endhint %}

{% hint style="info" %}
If You want use hooks, hocs or component decorator You must use EventrixProvider in Your application. Go to "EventrixProvider" page in "Context" section for more details.
{% endhint %}

{% tabs %}
{% tab title="Javascript" %}
```jsx
import React from 'react';
import { eventrixComponent, stateListener } from 'eventrix';

@eventrixComponent
class ClientsListCounter extends React.Component {
    constructor(...args) {
        super(...args)
        this.state = {
            clientsNumber: this.eventrix.getState('clients.list').length;
        };
    }

    @stateListener('clients.list')
    createCounter(clientsList) {
        this.setState({ clientsNumber: clientsList.length });
    };
    
    render() {
        return (
            <div>Clients number: {this.state.clientsNumber}</div>
        );
    }
}

export default ClientsListCounter;
```
{% endtab %}
{% endtabs %}

`createCounter` method will be called with clients list when `clients.list` state will change.
