# useEventrixState

This hook return eventrix state and setState method.

{% 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 { useEventrixState } from 'eventrix';

const UsersList = () => {
    const [users, setUsers] = useEventrixState('users');
    return (
        <div>
            {users.map(user => <div>{user.name}</div>)}
        </div>
    );
}
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
import React from 'react';
import { useEventrixState } from 'eventrix';
import { User } from './interfaces';

const UsersList = () => {
    const [users, setUsers] = useEventrixState<User[]>('users');
    return (
        <div>
            {users.map(user => <div>{user.name}</div>)}
        </div>
    );
}
```

{% endtab %}
{% endtabs %}

If you need only some specific data from state you can **get exactly what you want**. Thanks of that you will receive **better** **performance** of your app. Here is an example how to do that.

{% tabs %}
{% tab title="Javascript" %}

```jsx
import React from 'react';
import { useEventrixState } from 'eventrix';

const UserDetails = () => {
    const [name] = useEventrixState('currentUser.name');
    const [age] = useEventrixState('currentUser.age');
    return (
        <div>
            <div>{name}</div>
            <div>{age}</div>
        </div>
    );
}
```

{% endtab %}

{% tab title="Typescript" %}

```tsx
import React from 'react';
import { useEventrixState } from 'eventrix';

const UserDetails = () => {
    const [name] = useEventrixState<string>('currentUser.name');
    const [age] = useEventrixState<number>('currentUser.age');
    return (
        <div>
            <div>{name}</div>
            <div>{age}</div>
        </div>
    );
}
```

{% endtab %}
{% endtabs %}

```jsx
```