> For the complete documentation index, see [llms.txt](https://eventrix.gitbook.io/eventrix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eventrix.gitbook.io/eventrix/hooks/usefetchtostate-1.md).

# useReceiver

This hook added receiver to eventrix in component. When component did mount receiver is added to eventrix. When component will unmount receiver will be removed from eventrix. 

{% 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 axios from 'axios';
import { useReceiver, useEmit } from 'eventrix';

const DeleteUserButton = ({ user }) => {
    const emit = useEmit();
    useReceiver(
        'users:remove',
        (eventName, userData, stateManager) => {
            return axios.delete(`https://some.com/${userData.id}`).then(() => {
                const users = stateManager.getState('users');
                const newUsersList = state.users.filter(item => item.id !== userData.id);
                stateManager.setState('users', newUsersList);
            });
        }
    );
    
    const removeUser = useCallback(() => {
        emit('users:remove', user);
    }, [emit, user])
    
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
import axios from 'axios';
import { useReceiver } from 'eventrix';
import { EmitI } from 'eventrix/types/interfaces'
import { User, StoreState } from './interfaces';

interface PropsI {
    user: User;
}
const DeleteUserButton = ({ user }: PropsI) => {
    const emit = useEmit();
    useReceiver<User>(
        'users:remove',
        (eventName, userData, stateManager) => {
            return axios.delete(`https://some.com/${userData.id}`).then(() => {
                const users = stateManager.getState<User[]>('users');
                const newUsersList = state.users.filter(item => item.id !== userData.id);
                stateManager.setState<User[]>('users', newUsersList);
            });
        }
    );
    
    const removeUser = useCallback(() => {
        emit('users:remove', user);
    }, [emit, user])
    
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}
```

{% endtab %}
{% endtabs %}