自定義hooks實現在useState改變值之后立刻獲取到最新的值

import React from 'react'
function App () {
  let [count, setCount] = React.useState(0)
​
  const add = () => {
    setCount(count + 1)
    console.log(count)
 }
​
  return (
​
    <div>
      <h1>{count}</h1>
      <button onClick={add}>點我加 1 </button>
    </div>
​
 )
}
export default App;

以上代碼每次點擊按鈕得到的 count 值都是上一次的值

再來看看以下代碼

import React from 'react'
import useSyncCallback from './hooks/hook'
function App () {
  let [count, setCount] = React.useState(0)
  
  const add = () => {
    setCount(count + 1)
    fnc()
 }
  const fnc = useSyncCallback(() => {
    console.log(count)
 })
​
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={add}>點我加 1 </button>
    </div>
 )
}
export default App;
​

以上代碼可以得到更新之后的值

下面寫上 useSyncCallback 函數的實現

import { useEffect, useState, useCallback } from "react";
​
const useSyncCallback = (callback) => {
  const [proxyState, setProxyState] = useState({ current: false });
​
  const Func = useCallback(() => {
    setProxyState({ current: true });
 }, [proxyState]);
​
  useEffect(() => {
    if (proxyState.current === true) setProxyState({ current: false });
 }, [proxyState]);
​
  useEffect(() => {
    proxyState.current && callback();
 });
​
  return Func;
};
​
export default useSyncCallback;