如何在useEffect中调用接收参数的自定义Hook？

我提取了一个依赖useHistory、useLocation等Hook处理URL参数的函数，并封装为自定义Hook：

function useMyCustomHook() {
    const history = useHistory();
    const location = useLocation();
    const locationParams = new URLSearchParams(location.search);

    function myCustomHook(id: string ) {
        // 执行相关操作
    }

    return myCustomHook;
}

现在想在其他组件的useEffect中传入参数调用该Hook，当前写法如下：

const myCustomHook = useMyCustomHook(); // 希望在useEffect内传参而非此处
    
useEffect(() => {
    if (something) myCustomHook(myParam);
    
}, [foo]);

请问该方案是否可行？或是否有更优方案实现提取带Hook逻辑的代码并在useEffect中传参复用？

当前方案完全可行 #

你现在的写法符合React Hook的规则：useMyCustomHook()是在组件顶层调用的，没有违反Hook调用的限制。返回的函数可以直接在useEffect中传参执行，逻辑上没有问题。

可优化方向：稳定函数引用，避免不必要的重执行 #

当前实现中，每次组件渲染时，useMyCustomHook都会返回一个全新的myCustomHook函数实例。如果后续需要把这个函数加入useEffect的依赖数组（比如依赖它触发副作用），会导致每次组件渲染都触发useEffect，造成不必要的性能损耗。

可以用useCallback包裹内部函数，稳定其引用：

import { useHistory, useLocation, useCallback } from 'react';

function useMyCustomHook() {
    const history = useHistory();
    const location = useLocation();

    // 用useCallback稳定函数引用，仅在依赖变化时更新
    const myCustomHandler = useCallback((id: string) => {
        // 每次调用时获取最新的URL参数，避免闭包捕获旧值
        const locationParams = new URLSearchParams(location.search);
        // 执行你的业务操作，比如修改URL参数
        locationParams.set('targetId', id);
        history.push({ search: locationParams.toString() });
    }, [history, location]); // 依赖history和location，确保能获取最新的路由状态

    return myCustomHandler;
}

组件中使用优化后的Hook #

const myCustomHandler = useMyCustomHook();
    
useEffect(() => {
    if (something) {
        myCustomHandler(myParam);
    }
}, [foo, myCustomHandler]); // 将myCustomHandler加入依赖数组，因useCallback稳定了引用，仅在依赖变化时触发

额外注意点 #

• 把locationParams的创建移到内部函数中，可以避免闭包捕获旧的URL参数值，确保每次调用都能获取最新的路由状态。
• 务必遵循Hook规则：自定义Hook只能在组件顶层或其他自定义Hook中调用，不能在useEffect、循环、条件判断内部调用useMyCustomHook()。

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