Vike-React-Query 中使用 useSuspenseQuery 的 ESLint 问题解析

在使用 Vike-React-Query 库时，开发者可能会遇到一个常见的 ESLint 警告。当按照官方文档示例，在 withFallback 高阶组件中使用 useSuspenseQuery 钩子时，ESLint 的 react-hooks/recommended 插件会报错。

问题现象

当开发者尝试在 withFallback 的回调函数中直接使用 useSuspenseQuery 时，ESLint 会抛出以下错误：

React Hook "useSuspenseQuery" cannot be called inside a callback. 
React Hooks must be called in a React function component or a custom React Hook function

这个错误是合理的，因为 React Hooks 的规则确实要求在函数组件或自定义 Hook 中调用，而不能在普通回调函数中使用。

解决方案

方案一：禁用 ESLint 规则

最直接的解决方法是禁用当前文件的 ESLint 规则检查：

/* eslint react-hooks/rules-of-hooks: 0 */

虽然这种方法能快速解决问题，但并不推荐，因为它可能会掩盖其他潜在的 Hook 使用问题。

方案二：提取为独立组件

更优雅的解决方案是将内联组件提取为独立的函数组件：

const MovieWithoutFallback = ({ id }: { id: string }) => {
    const result = useSuspenseQuery({
        queryKey: ['movie', id],
        queryFn: () =>
            fetch(`https://example.com/api/films/${id}.json`)
                .then((res) => res.json())
    });

    const { title } = result.data;

    return (
        <div>
            Title: <b>{title}</b>
        </div>
    );
};

export const Movie = withFallback(
    MovieWithoutFallback,
    ({ id }) => <div>Loading movie {id}</div>,
    ({ id, retry, error }) => (
        <div>
            Failed to load movie {id}
            <button onClick={() => retry()}>Retry</button>
        </div>
    )
);

这种方法不仅解决了 ESLint 警告，还提高了代码的可读性和可维护性。

技术背景

这个问题的根源在于 ESLint 插件无法识别 withFallback 的回调函数实际上会被用作 React 组件。React Hooks 的规则要求 Hook 必须在 React 函数组件或自定义 Hook 中调用，而 ESLint 静态分析时无法确定回调函数的最终用途。

最佳实践建议

1. 组件提取优先：尽可能将内联组件提取为独立组件，这符合 React 的最佳实践
2. 谨慎禁用规则：只在确实必要时禁用 ESLint 规则，并添加注释说明原因
3. 代码组织：保持组件层次清晰，避免过度嵌套的回调结构

总结

虽然这个问题表面上是 Vike-React-Query 使用中的一个小障碍，但它实际上反映了 React 开发中更广泛的组件组织和代码结构问题。通过采用提取组件的方法，开发者不仅能解决 ESLint 警告，还能写出更清晰、更易维护的代码。