# Qwik Scratchpad

import {x} from '...'

let nu = 20;
function foo() {
    return nu++;
}

function Counter(props) {
  const [count, blablabla] = useState(props.initial);

    state.count++
    state.blablabla()
  return (
    <span>{count}</span>
    <button onClick={() => setCount(count + props.step + extraStep)}>
      +
    </button>
  );
}

---

export const Counter = qComponent({
    onMount: (props) => {
      const [count, setCount] = useState(props.start);
      const extraStep = foo();
      setState(0, count);
      setState(1, setCount);
      setState(2, extraStep);
        
      setState(number, json |  )
    },
    onRender: qHook(),
});

export const  Counter_onRender = qHook(() => {
  const count = getState(0);
  const setCount = getState(1);
  const extraStep = getState(2);

  return (
    <span>{count}</span>
    <button onClick={QRL`...`.with([extraStep])}>+</button>
  );   
});

export const Counter_onClick = qHook((props, state, args) => {
  const [count, setCount] = getState(0);
  const [extraStep] = args;

  return setCount(count + props.step + extraStep);
});

---

import {x} from '...'

let nu = 20;
function foo() {
    return nu++;
}

function CounterPreamble = function(props, state) {
  const [count, setCount] = useState(props.initial);
  const nu = 20;
  const extraStep = nu + 20;
  return [count, setCount, extraStep];
}

export const Counter_onMount = (props, state) => {
  return CounterPreamble(props.initial);
    
} 

extra const Counter_onRender_click = function(props, state) {
  const [count, setCount, extraStep] = state;
  return setCount(count + props.step + extraStep)}
}

function Counter(props, state) {
  const [count, setCount, extraStep] = CounterPreamble(props, state)
  return (
    <span>{count}</span>
    <button onClick={QRL`...`}>
      +
    </button>
  );
}