# Notes

const MyComp = qComponent<{salutation: string}, {name: string}>({
  onMount: qHook((props) => ({name: 'World'})),
  onRender: qHook((props, state) => <span>{props.salutation} {state.name}</span>)
})

const MyComp = qComponent((props: {salutation: string}) => {
  const state = useState({name: 'World'});
  
  onRender(() => <span>{props.salutation} {state.name}</span>)
})

const MyComp = qComponent((props: {salutation: string}) => {
  const state = useState({name: 'World'});
  const counter = useInterval(100);
  useEffect(($) => state.time = new Time($(counter).value))
  
  return onRender(() => <span>{counter.time}: {props.salutation} {state.name}</span>)
  // export const s1 = () => {
  //   const [counter, props, state] = useLexicalScope();
  //   return <span>{counter.time}: {props.salutation} {state.name}</span>;
  // };
  // onRender(qrl('./chunk#s1', [counter, props, state]))
})

const MyComp = qComponent((props: {salutation: string}) => {
  const state = useState({name: 'World'});
  
  return <span>{props.salutation} {state.name}</span>;
})

const x = (props: {salutation: string}) => {
  const state = useState({name: 'World'});
  
  return () => <span>{props.salutation} {state.name}</span>;
}
const MyComp = qComponent(x)