hook

[lloydzhou]

1. change component like react function component
2. add useState hook

function Counter(props, { count = 0 }, update) {
  const increment = () => update({ count: ++count });
  return <button onclick={increment}>{count}</button>
}

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

[lloydzhou]

<div id="root" />
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx" data-type="module">
/** @jsx h */
/** @jsxFrag Fragment */

import { h, Fragment, render, useState, useEffect, useRef } from "./little-vdom.js";

function Since({ time }) {
  const [count, setCount] = useState()
  const r = useRef()
  useEffect(() => {
    console.log('update', r.current)
    const timer = setTimeout(() => {
      setCount(count + 1) // update every second
    }, 1000)
    return () => clearTimeout(timer)
  }, [count])
  useEffect(() => {
    console.log('mounted', r, r.current)
    return () => {
      console.log('unmounted')
    }
  }, [])
  const ago = (Date.now() - time) / 1000 | 0;
  return (
    <>
      <h1>Title</h1>
      <time ref={r}>{ago}s ago</time>
    </>
  )
}

function App() {
  const [visible, setVisible] = useState(true)
  useEffect(() => {
    setTimeout(() => setVisible(false), 3000)
  }, [])
  return <div>{visible ? <Since time={Date.now()} /> : <div>clear</div>}</div>
}

render(<App />, document.querySelector('#root'))
</script>