我应该记住自定义 React 钩子的返回对象吗?

Question

如果我使用useCallback作为自定义钩子的方法，我是否也应该记住返回的对象？我假设它不会每次都创建一个新对象，因为它是由记忆方法和基元组成的。

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

你不需要记住返回的对象，除非你把对象直接传递给useEffect的函数，在这种情况下，引用将失败。

如果您像这样使用它，则无需在useCallback上添加额外的记忆层：

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

但是，像下面的代码这样的用法需要记住返回的对象

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