如何实现自定义Hook返回函数，且该函数内可调用其他Hook？

React 对Hook调用有强制约束：所有Hook只能在函数组件、自定义Hook的顶层作用域调用，禁止嵌入普通函数、条件判断、循环逻辑中。
React 依靠固定的Hook调用顺序维护组件对应的状态链表，你把usePrevious写在返回的processingData回调内部，回调的调用时机、调用次数完全由业务逻辑决定，React无法稳定追踪Hook对应的状态，自然会抛出规则违反错误。

要实现和useNavigate()一致的调用模式完全可行，核心原则是：所有Hook调用全部放在自定义Hook的顶层作用域，返回给外部的回调函数只执行普通JS逻辑、读写已维护的状态，绝对不在回调内部调用Hook。
针对你需要记录上一次入参的需求，直接在useCustomHook顶层用ref存储历史值即可，不需要在回调里嵌套调用usePrevious，代码示例如下：

// useCustomHook.js
import { useRef, useCallback } from 'react';

export default function useCustomHook() {
  // 所有Hook统一在顶层声明
  const prevValueRef = useRef();

  // 用useCallback包裹返回函数，保证引用稳定，和useNavigate返回值特性一致
  const processingData = useCallback((currentState) => {
    // 回调内部仅做普通逻辑处理，不调用任何Hook
    const previousState = prevValueRef.current;
    const processResult = process(currentState, previousState);
    // 处理完成后更新ref，将当前值存为下一次调用的历史值
    prevValueRef.current = currentState;
    return processResult;
  }, []);

  return processingData;
}

组件侧的调用逻辑不需要做任何改动，完全符合你预期的使用方式：

// Component.js
import { useEffect, useState } from 'react';
import useCustomHook from './useCustomHook';

export default function DemoComponent() {
  const [state1, setState1] = useState();
  const [temp, setTemp] = useState();
  const [state2, setState2] = useState();
  // 顶层调用自定义Hook拿到处理方法
  const cusHook = useCustomHook();

  useEffect(() => {
    // 任意业务位置、任意时机都可以调用返回的方法
    cusHook(state1)
  }, [])

  useEffect(() => {
    cusHook(state2)
  }, [temp])
}

补充说明 #

• 如果需要复用独立的usePrevious逻辑，同样要在自定义Hook顶层调用该Hook、传入对应响应式值，禁止把Hook放到回调内部执行。
• 返回给外部调用的方法建议用useCallback包裹，保证函数引用稳定，和useNavigate的返回值特性保持一致，避免每次组件重渲染生成新函数引用，触发不必要的effect执行、组件重渲染。

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