# ComponentState Hook

@react-state follows React and supports hooks from version 7.0.0.

In order to cretae actions you need to pass followinf parameters to **useComponentState** hook

1. Actions type
2. statePath *(optional - if not passed then takes root)*
3. stateIndex *(optional)*

Hook returns actions and new statePath which can be passed further.

```typescript
const TodoDescriptionHooks = ({ statePath, stateIndex }) => {
    const { actions, statePath } = useComponentState(TodoStateActions, statePath, stateIndex);

    return (<div>{ actions.testTodoDescription }</div>);
};

export default React.memo(TodoDescriptionHooks);
```

{% hint style="info" %}
In [@ComponentState](https://vytautaspranskunas.gitbook.io/react-state-rxjs/core-concepts/componentstate-decorator) decorator, when using classes, there is extended ***shouldComponentUpdate*** method which makes sure that component is not rerendered until state is changed. Since hooks do not have ***shouldComponentUpdate*** lifecycle method, React proposes to use **React.memo** in places where it is needed. **So in this I strongly advice users to pay more attention and use hooks to according to best React practices because it might affect overall performance.**
{% endhint %}

{% hint style="info" %}
Hooks allows to use multiple actions in one component. **If you need to to this it is first sign of state architecture smell** and is going against @react-state ideology that - [**state is representation of your components on the screen**](https://vytautaspranskunas.gitbook.io/react-state-rxjs/core-concepts/main-idea)
{% endhint %}