參考資料

Hooks API 參考 從 Hooks 開始，讓你的網頁 React 起來

Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。

useState / State hook

回傳一個 state 的值，以及更新 state 的 function。

// initialState 參數只會在初始 render 時使用，在後續 render 時會被忽略。
const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

useEffect / Effect Hook

接受一個包含指令式，且可能有副作用程式碼的 function。 第一個參數 - function 第二個參數 - 用來辨識函式執不執行

清除一個 effect

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

有條件的觸發 effect

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

如果你想 effect 只執行和清除一次（在 mount 和 unmount），你可以傳遞一個空的 array （[]）作為第二個參數