如果有錯誤，歡迎留言指教~ Q_Q

State 的更新可能是非同步的!?

如果想要連續執行更新 state，你會發現看起來執行了三次，但最後卻只有執行一次！？

  const [date, setDate] = useState(0);

  const handleClick = () => {
    setDate(date + 10);
    setDate(date + 10);
    setDate(date + 10);
  };
  
  // data -> 10

當觸發 setState 時，並不會先馬上改變 state ，而是會把改變的 function 先放進 queue 裡，最後 React 才會統一處理 setState 去 re-render component。

這是 React 的 batching 的效能優化機制，讓 setState 呈現非同步的模樣，讓當下 state 並不會馬上被改變，只會在最後觸發 render

console.log 的 state 值依然是上一個

...

那要如何能讓 state 和 props 之間能保持一致 ->

state 是當某個改變正在被應用時對 component state 的一個參考。它不應該直接被 mutate。

setState(updater, [callback])

如何取得在 setState 後的最新 state 值呢?

1. 函式回傳值

setState((state, props) => {
  ...
});

Function 將接收先前的 state 作為第一個參數，並且將更新的 props 作為第二個參數：

    
  const [date, setDate] = useState(0);

  const handleClick = () => {
    setDate((preDate) => preDate + 10);
    setDate((preDate) => preDate + 10);
    setDate((preDate) => preDate + 10);
  };
  
  // data -> 30

2. 使用 useReducer

然後，下篇待續囉~

我其實沒寫完鴨 XDDD