Demo for blog https://dukeluo.github.io/2021/06/18/react-useeffect.html

useEffect-demo.tsx

import { useCallback, useEffect, useState } from "react";
import React from "react";
import ReactDOM from "react-dom";

const Counter = () => {
    const [incrementClicked, setIncrementClicked] = useState(false);
    const [decrementClicked, setDecrementClicked] = useState(false);
    const [count, setCount] = useState(0);

    const increment = useCallback(() => {
        setCount(count + 1);
    }, [count]);
    const decrement = useCallback(() => {
        setCount(count - 1);
    }, [count]);

    useEffect(() => {
        console.log(`The current count is ${count} and is an ${count % 2 ? 'odd' : 'even'}.`);
        console.log(`The status of increment button ${incrementClicked}.`);
        console.log(`The status of decrement button ${decrementClicked}.`);

        return () => {
            console.log('------Im in destory process--------')
            console.log(`The current count is ${count} and is an ${count % 2 ? 'odd' : 'even'}.`);
            console.log(`The status of increment button ${incrementClicked}.`);
            console.log(`The status of decrement button ${decrementClicked}.`);
            console.log('------Thank You--------')
        }
    })

    return (
        <>
            <p>Count: {count}</p>
            <button onClick={
                () => {
                    increment();
                    setIncrementClicked(true);
                    setDecrementClicked(false);
                }
            }>Increment Count</button>
            <button onClick={
                () => {
                    decrement();
                    setIncrementClicked(false);
                    setDecrementClicked(true);
                }
            }>Decrement Count</button>
            <button onClick={
                () => {
                    setIncrementClicked(false);
                    setDecrementClicked(false);
                }
            }>Reset button status</button>
        </>
    );
}

const App = ({ message }: {
    message: string,
}) => {
    const [visible, setVisible] = useState(true);

    return (
        <>
            <h3>{message}</h3>
            {visible && <Counter />}
            <button onClick={
                () => {
                    setVisible(!visible)
                }
            }>{`${visible ? 'Hide Counter' : 'Show Counter'}`}</button>
        </>
    );
}

ReactDOM.render(<App message={"Hello, esbuild"} />, document.getElementById("root"))