使用Hook

首先，非常強烈的建議，如果你還在堅持寫類別組件class component，請改掉這個習慣吧。

到目前為止，許多新且大型的專案都已經使用函式組件function component並使用React hooks，所以有極大的可能，之後所遇到的專案，都會專注於使用hooks。

不過有一個例外，就是你一直在處理陳年老舊並不需要重構的項目，並且其中大量使用類別組件。

有關useState

有關useState，我想最值得一提的就是，在set state的時候使用currying。事實上，我們之前在partial application中已經看過這個例子了：

const App = () => {
  const [username, setUsername] = useState('');
  
  const setInput = (setter) => (event) => {
    setter(event.currentTarget.value);
  }
  
  return(
    <form>
        <input
          value={username}
          onChange={setInput(setUsername)}
        />
    </form>
  );
}

當我們使用currying時，我們可以任意組合不同函式以達到不同目的。在這個例子中，我們使用一個組合函式以便創造不同的setter函式來更新React中的state。

有關useEffect

使用useEffect時，我們必須儘量避免在useEffect中加入async IIFE（immediately invoked functions expressions，意指可以立即執行的functions expressions）。舉例來說，你必須要在useEffect中呼叫API，你可能會這樣寫：

未完待續