React

HTML

<div id="app"></div>

React

function App(){
    return(
        <div>
            <h1>Counters</h1>
            <section>
                <Counter />
            </section>
        </div>
    );
}

function Counter(props){
    console.log("Inside Counter Function....");

    const [numOfClicks,setNumOfClicks] = React.useState(0);
    console.log("numOfClicks = "+numOfClicks);

    React.useEffect(()=>{
        console.log("In useEffect");
        console.log("useEffects - numOfClicks = "+numOfClicks);
        setNumOfClicks(numOfClicks);
    },[numOfClicks]);

    function handleClick(){
        setNumOfClicks(numOfClicks+1);
        console.log("Inside handle Click....");
    }

    return(
        <article>
            <h2>Counter {props.name}</h2>
            <p>You clicked {numOfClicks} times</p>
            <button className="button" onClick={handleClick}>
                Click Me
            </button>
        </article>
    );

}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App/>);