我正在尝试创建一个使用函数的自定义钩子useCallback
函数。这是一个玩具示例:
export function useCustomLink(link: { url: string; description: string }) {
const [updating, setUpdating] = useState<boolean>(false);
const [linkInfo, setLinkInfo] = useState<{ url: string; description: string } | "loading" | "error">("loading");
useEffect(() => {
// initiate linkInfo
if (!updating) {
setLinkInfo(link);
}
}, [link]);
const updateLink = useCallback((update: Partial<{ url: string; description: string }>) => {
if (linkInfo !== 'loading' && linkInfo !== 'error') {
const updated = { ...linkInfo, ...update };
setLinkInfo(updated);
setUpdating(true);
}
}, [linkInfo, link]);
return {
linkInfo, updateLink
};
}
我对依赖列表的理解是,我只需要添加函数直接使用的变量(本例中为linkInfo
)。但是,如果我也不将link
(传递给自定义钩子函数)添加到列表中,那么我最终会得到linkInfo
. 谁能帮助解释为什么我需要将 add'l 变量添加到依赖项中?这是正确的使用方法useCallback
吗?
谢谢!