Next.js登录模态框useCallback相关问题求助

1. setIsLoading触发重渲染后，onSubmit函数会被重建吗？ #

会。你的onSubmit是定义在组件函数体内的普通函数，每次组件重渲染（比如setIsLoading修改状态触发的渲染）都会重新创建这个函数，生成新的函数引用。如果想避免不必要的重建，可以用useCallback包裹它：

const onSubmit = useCallback<SubmitHandler<FieldValues>>((data) => {
    setIsLoading(true);
    signIn('credentials',{
        ...data,
        redirect: false
    }).then((callback)=>{
        setIsLoading(false)
        if(callback?.ok){
            toast.success('Logged in')
            router.refresh()
            loginModal.onClose()
        }
        if(callback?.error){
            toast.error(callback.error)
        }
    })
}, []);

这样只有当依赖数组里的变量变化时，onSubmit才会重新创建。

2. 为什么Modal的useCallback能正确阻止重复提交？ #

你原本以为useCallback会捕获旧的disabled值（false），但实际能正确读取最新的disabled=true，核心原因是：

• 父组件调用setIsLoading(true)后触发重渲染，此时会生成新的onSubmit函数，并传递给Modal组件。
• Modal里的handleSubmit依赖数组是[onSubmit]，当传入的onSubmit更新时，useCallback会重新生成一个新的handleSubmit函数，这个新函数会捕获Modal当前最新的disabled值（即父组件传来的isLoading=true）。
• 后续点击按钮时，新的handleSubmit会读到disabled=true，直接返回，不会执行onSubmit。

不过这里存在一个不符合React Hooks规则的问题：handleSubmit逻辑依赖disabled，但没有把disabled加入依赖数组，这很容易引发闭包陷阱。正确的写法应该把disabled也加入依赖：

const handleSubmit = useCallback(()=>{
    console.log(disabled)
    if(disabled) return
    onSubmit()
}, [onSubmit, disabled])

useCallback的作用与正确用法 #

useCallback的核心作用是缓存函数引用，避免因为函数引用变化导致子组件不必要重渲染，或者避免依赖该函数的Hooks（比如useEffect）重复执行。

使用时要注意两点：

• 依赖数组必须包含回调函数中用到的所有外部变量、状态、函数，否则会捕获旧值，引发难以排查的闭包问题。
• 不要滥用useCallback：如果函数没有作为props传给子组件，也没有被其他Hooks依赖，那用useCallback反而会增加不必要的性能开销。

回到你的场景，更规范的做法是：

1. 父组件用useCallback包裹onSubmit，避免每次渲染都生成新的函数引用。
2. Modal组件的handleSubmit把disabled加入依赖数组，遵循Hooks规则。

内容的提问来源于stack exchange，提问作者IGODX