---
# System prepended metadata

title: 'DISCUSSION: Qwik Component + Handlers + State'

---

# DISCUSSION: Qwik Component + Handlers + State

###### tags: qwik


## Overview

Brainstorm how should Qwik handle component templates, handlers, state and styles.

## Related

- [DISCUSSION: Qwik Component Stylesheet Handling](/2g3LZuAfTaShUePul8XDxg)


## Goals
- Component, handler, and state initializer need to be separated. 

## Example


**File: `counter.component.tsx`**
```typescript
import {increment, decrement} from './counter.handler';

export const Counter = qComponent(
  'div', 
  { 
    class: 'counter'
  },
  async function Counter(this: ComponentRef, props: {value?: number}) {
    const state = getState(this)
    return (<>
      <button on:click={increment}>+</button>
      Count: {state.count}
      <button on:click={decrement}>-</button>
    </>);
  }
);
```

**File: `counter.state.tsx`**
```typescript=
export CounterState {
  count: number;
}
```


**File: `counter.handler.tsx`**
```typescript
export async function increment(state: CounterState) {
  state++;
}

export async function decrement(state: CounterState) {
  state--;
}
```
