常用的情境如文字輸入框，當使用者在搜尋框輸入文字時，使用者每輸入一個字元就會觸發onChange，為了避免重複大量的呼叫API，他會設定一個timer等到一定時間確定使用者沒有在輸入後才去改變狀態或是呼叫API

let timer
const timeout = 500
const onQueryChange = e => {
  const newQuery = e.target.value
  clearTimeout(timer)
  timer = setTimeout(() => setQuery(newQuery), timeout)
}

return 
<>
	<TextField
    color="success"
    placeholder="Search PizzaFlix"
    sx={{
      width: '100%',
    }}
    autoFocus
    onChange={onQueryChange}
  />
</>