---
# System prepended metadata

title: Untitled

---

file: `counter.ts`:
```typescript=
export const Counter = qComponent(() => {
  const state = useState({count: 0})
  return onRender(() =>
    <button on:click={() => state.count++}>
      {state.count}
    </button>
  );
});
```

// After - - - - 
file: `counter.js`:
```typescript=
export const Counter = qComponent(lazy('a.js#s0'));
```
file: `a.js`:
```typescript=
export const s0 = () => {
  const state = useState({count: 0});
  return onRender(lazy('b.js#s1', [state]))
}
```
file: `b.js`:
```typescript=
export const s1 = () =>
  const [state] = useLexicalScope();
  return <button on:click={lazy("c#s2", [state]}>
           {state.count}
         </button>
);
```
file: `c.js`:
```typescript=
export const s2 = () => {
  const [myState] = useLexicalScope();
  return myState.count++;
}
```

SSR as:
```html
<div on:q-render="b.js#s1[obj1]" q:obj="obj1">
  <button on:click="c.js#s2[obj1]">0</button>
</div>
<script type="text/qwik">{"obj1": {"count":0}}</script>
```

---

![](https://i.imgur.com/uOKtbat.png)

```typescript=
export function Counter(props: {}) {
  const [count, setCount] = useState(0);
  return (
    <button onclick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}
```
