# 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`**

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`**

export CounterState {
  count: number;
}

**File: `counter.handler.tsx`**

export async function increment(state: CounterState) {
  state++;
}

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