import { useState, useRef } from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

// useRef 顧名思義就是使用「參考」該值與元件生命週期脫鉤不受渲染影響、創造的可變值(Mutable Value)也不會觸發渲染

function App() {
  console.log('App render');
  const [stateCount, setStateCount] = useState(0);
  const refCount = useRef(0);
  const handleClick = () => {
    refCount.current ++;
    setStateCount(prev => prev + 1);
    console.log('refCount.current', refCount.current); // always delay one after ref
    console.log('stateCount', stateCount);
    // alert(refCount.current);
  }
  
  return <>
    Ref count:
    <h1>{refCount.current}</h1>
    State count:
    <h1>{stateCount}</h1>
    <button onClick={handleClick}>Add count</button>
  </>
}

ReactDOM.render(<App />, document.querySelector("#app"));