【React】 UseEffect を使用して、コンポーネントの特定の処理が呼ばれたときだけある処理を実行する

今回のテスト
ボタンとテキストボックスを用意して、ボタンをクリックするときだけ、カウントをする。

■以下前提のコード

sample.js

import React,{useState,useEffect} from 'react'
const sample= () => {
}
export default sample

■以下テストコード

sample.js

import React,{useState,useEffect} from 'react'

const BasicUseEffect = () => {
    const [cnt,setCnt] = useState(0)
    const [item,setItem] = useState('')
    useEffect(()=> {
        console.log("useEffect invoked")
    },[cnt])

    return (
        <div>
            <button onClick={()=> setCnt(prevCnt=>prevCnt+1)}>Click {cnt}</button>
            <input type='text' value={item} onChange={evt=>setItem(evt.target.value)}/>          
        </div>
    )
}

export default sample
'''
■結果
ボタンをクリックしたときだけ、ブラウザのコンソールに「useEffect invoked」がよばれる。
※const [item,setItem]の定義の最後にある　,[cnt]　部分を削除すると、テキストボックスに文字を入力したときと、
　ボタンを押したときの両方でブラウザのコンソールに「useEffect invoked」がよばれる。