什麼是 useState？

useState 是 React 中的一個 Hook，用於在函式元件中添加狀態，透過 useState，我們可以在函式元件中定義和管理狀態資料。

useState 返回一個包含兩個值的陣列，其中包括：

1. 當前的狀態：在元件首次渲染時，它的值將等同於我們傳遞給 useState 的初始值。
2. set 函式：這個函式負責更新狀態的值，同時觸發元件的重新渲染。

function App() {
  // useState 返回一個包含兩個值的陣列
  // ["Hello", set 函式]
  const state = useState("John");
}

通常，我們會直接對返回的結果進行陣列解構，以方便取得狀態和相應的 set 函式：

1. name 變數將包含當前的狀態值，初始值為 "John"。
2. setName 函式用於更新 name 狀態，通常按照命名慣例，以 set 開頭，並使用駝峰式命名。

function App() {
  const [name, setName] = useState("John");
}

可以傳入任何值作為初始狀態

function App() {
  // 傳入字串
  const [name, setName] = useState("John");
	
  // 傳入數字
  const [age, setAge] = useState(25);
	
  // 傳入布林
  const [isChecked, setIsChecked] = useState(false);
	
  // 傳入陣列
  const [fruits, setFruits] = useState(["Apple", "Banana"]);
	
  // 傳入物件
  const [product, setProduct] = useState({
    name: "iPhone 15",
	price: 50000
  });
	
  // 傳入函式
  // 1. 函式只會在初始渲染的時候執行一次
  // 2. 函式不能有任何參數
  // 3. 函式必須返回一個值
  const [storage, setStorage] = useState(() => {
    // 一些資料的處理
	const value = ...
    return value
  });
}

只能在元件的頂層調用

請注意，useState 只能在元件的頂層範圍內調用，以下是一些範例，顯示了正確和錯誤的使用方式：

function App() {
  // 正確寫法（放在元件的頂層）
  const [name, setName] = useState("John");

  // 錯誤寫法（放在 if 內）
  if (...) {
    const [name, setName] = useState("John");
  }

  // 錯誤寫法（放在函式內）
  function handleClick() {
    const [name, setName] = useState("John");
  }
}

透過 set 函式更新狀態

當我們需要更新狀態 name 的時候，避免直接修改 name 的值，因為這樣的操作不會觸發元件的重新渲染，導致畫面上的 name 不會更新。

我們應該使用 useState 中解構出來的 set 函式來執行狀態更新，這樣 React 才能正確處理重新渲染的邏輯。

function App() {
  const [name, setName] = useState("John");

  return (
    <div>
	  <h1>{name}</h1>

	  // BAD
	  <button onClick={() => name = "Alex"}>
	    Set name
      </button>
			
      // GOOD
	  <button onClick={() => setName("Alex")}>
        Set name
      </button>
    </div>
  )
}

結語

useState 鉤子是 React 中一個重要的 Hook，用來管理元件的狀態，藉由這個簡單而強大的 Hook，可以使元件變得更具動態性，並為應用程式提供更好的互動性。

記住嚴格遵守正確的用法，將 useState 放在元件的頂層，以確保應用程式正確運作。