const App = () => {
    const [count, setCount] = React.useState(0)
    const [text, setText] = React.useState('')
    const [isShow, setShow] = React.useState(true)

    // レンダリングされた時にのみ実行
    React.useEffect(() => {
        console.log(`レンダリングされました。`)
    }, [])

    // count または textが更新された時に実行
    React.useEffect(() => {
        console.log(`count または textが更新されました。count=${count} text=${text}`)
    }, [text, count])

    // コンポーネントが削除される際に実行
    React.useEffect(() => {
        return () => {
            console.log('コンポーネントが削除されました。')
        };
    }, [])

    return (
        <div>
            <input type='text' value={text} onChange={e => setText(e.target.value)}></input>
            <button onClick={() => setCount(count + 1)}>クリック {count} 回</button>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById("root"));