React自定义UseMessage Hook触发Invalid hook call错误，求排查

错误提示翻译 #

原错误：Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
中文翻译：错误：无效的Hook调用。Hook只能在函数组件的主体内部调用。

问题根源 #

1. Hook命名不规范：React自定义Hook的强制命名规则是必须以小写use开头，你的Hook命名为UseMessage（首字母大写），导致React无法识别它是合法的Hook，从而触发调用校验错误。
2. （额外优化点）逻辑中两次调用setMessage(() => msg)完全重复，属于冗余代码，可根据需求调整。

修正后的代码 #

const useMessage = (msg: string, delay: number, cb?: () => void): [() => void] => {
  const [message, setMessage] = useState("");

  const setCB = () => {
    setMessage(msg);
    setTimeout(() => {
      // 若无需重复设置消息，可删除此行
      // setMessage(msg);
      if (typeof cb === "function") {
        cb();
      }
    }, delay);
  };

  return [setCB];
};

export default useMessage;

正确使用示例 #

确保在函数组件的顶层作用域调用该Hook，禁止在条件判断、循环或嵌套函数内调用：

function MyComponent() {
  const [triggerMessage] = useMessage("操作成功", 2000, () => {
    console.log("延迟回调执行");
  });

  return (
    <button onClick={triggerMessage}>
      点击触发消息与回调
    </button>
  );
}

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