我應該記住自定義 React 鈎子返回的 object 嗎？

Question

如果我使用useCallback作為自定義鈎子的方法，我是否還應該記住返回的 object？ 我假設它不會每次都創建一個新的 object，因為它是由記憶方法和原語組成的。

export const useToggle = (args: UseToggleProps) => {
    const initialState=
        args.initialState !== undefined ? args.initialState : false
    const [active, setActive] = useState(initialState)

    const toggleOff = useCallback(() => {
        setActive(false)
    }, [])

    const toggleOn = useCallback(() => {
        setActive(true)
    }, [])

    const toggle = useCallback(() => {
        setActive((active) => !active)
    }, [])

    // Should this also be memoized with useMemo?
    return {
        active,
        toggle,
        toggleOff,
        toggleOn
    }
}

Answer 1

您不需要記住返回的 object 除非您將 Object 直接傳遞給 useEffect 的 function 在這種情況下參考將失敗

如果您像這樣使用它，則不需要在useCallback上添加額外的記憶層：

const Comp = () => {
   const { toggleOn, toggleOff } = useToggle();

   useEffect(() => {
      console.log('Something here')
   }, [toggleOn]);  
   return (
       <Child toggleOn={toggleOn} toggleOff={toggleOff} />
   )
}

然而，像下面代碼這樣的用法需要對返回的 object 進行記憶

const Comp = () => {
   const toggle = useToggle();

   useEffect(() => {
      console.log('Something here')
   }, [toggle]);  
   return (
       <Child toggleHandlers={toggle} />
   )
}