如何在HOC组件中正确使用React Hooks且不违反hooks使用规则？

你遇到的是eslint-plugin-react-hooks的静态检查误判，和实际是否违反Hooks规则没有关系。
这个规则的判断逻辑是默认将首字母大写的函数识别为React函数组件，你最初命名为WithNetworkDetector时，eslint将这个HOC函数误判成了普通React组件，才触发了错误提示。将命名改成首字母小写的withNetworkDetector后，eslint不再把它识别为组件，自然不会报错。

完全不违反。
React Hooks的核心规则只有两条：

• 仅在React函数组件、自定义Hook的最顶层调用Hook
• 仅在React函数组件、自定义Hook内部调用Hook
  你贴的代码里，useState、useCallback都定义在HOC返回的内部函数组件的最顶层，完全符合规则要求，没有任何合规问题。

不仅安全，而且更符合社区规范。
高阶组件（HOC）的通用命名惯例就是首字母小写、以with作为前缀，比如生态里常见的withRouter、withTranslation都遵循这个规则。你原来的大写命名反而不符合惯例，会让其他开发者误以为WithNetworkDetector是可以直接用JSX渲染的组件，而非接收组件返回组件的工具函数。

• 透传props：你当前的代码没有把内部组件接收到的props传给被包裹的Component，建议修改为<Component {...props} />，否则被包裹的组件无法接收外部传入的属性。
• 添加displayName：给内部返回的组件设置displayName，方便在React DevTools中调试，示例如下：

export const withNetworkDetector = (Component: FC<{}>) => {
  const WrappedComponent = (props: any) => {
    // 原有逻辑不变
    const [isDisconnected, setIsDisconnected] = useState(false);

    const handleConnectionChange = useCallback(() => {
      // ...
      setIsDisconnected(true);
    }, []);

    return (
      <div>
        {isDisconnected && (
          <Toast type="warning" text={TOAST_ERRORS.LOST_INTERNET_CONNECTION} />
        )}
        <Component {...props} />
      </div>
    );
  };
  WrappedComponent.displayName = `withNetworkDetector(${Component.displayName || Component.name || 'Component'})`;
  return WrappedComponent;
};

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