NextJS 13.4中useEffect与自定义Hook引发无限重渲染问题排查

核心原因拆解 #

1. 自定义Hook每次返回新的函数引用 #

你的useBackend每次被调用时，都会创建一个全新的getData函数。App组件每渲染一次，const { getData } = useBackend()就会拿到一个新的函数引用——这会直接导致useEffect的依赖项[getData]发生变化，触发useEffect重新执行。

2. 引用类型 vs 值类型的更新差异 #

这就是返回字符串没问题，但返回数组就触发循环的关键：

• 字符串是值类型：当你setData("foo")时，React会比较新值和旧值的内容，第二次执行setData("foo")时，内容完全一致，React会跳过重渲染。
• 数组是引用类型：每次getData()返回的都是新创建的数组（哪怕内容一模一样），setData(newArray)时，React比较的是数组的引用，新旧引用不同，就会触发组件重渲染。

组件重渲染→调用useBackend得到新的getData→useEffect依赖变化→执行useEffect→setData新数组→组件重渲染……无限循环就此产生。

这是NextJS特有问题吗？ #

不是，这是React核心的状态更新和依赖判断机制导致的，不管是NextJS还是普通React项目，只要代码逻辑一致，都会出现这个问题。

修复方案 #

方案1：用useCallback让getData引用稳定 #

在useBackend里用useCallback包裹getData，确保每次调用useBackend时，只要没有依赖变化，就返回同一个函数引用：

import { useEffect, useState, useCallback } from "react";

type DataT = {
    id: string;
};

const useBackend = () => {
    // getData内部无依赖，所以依赖数组为空
    const getData = useCallback((): DataT[] => {
        const data = [{ id: "foo" }];
        return data;
    }, []);
    return { getData };
};

// App组件代码保持不变

方案2：用useMemo稳定Hook的返回对象 #

如果你的Hook需要返回多个方法/值，可以用useMemo包裹返回的对象，确保整个对象的引用稳定：

import { useEffect, useState, useCallback, useMemo } from "react";

type DataT = {
    id: string;
};

const useBackend = () => {
    const getData = useCallback((): DataT[] => {
        const data = [{ id: "foo" }];
        return data;
    }, []);

    // 用useMemo确保返回的对象引用不变
    return useMemo(() => ({ getData }), [getData]);
};

方案3：优化useEffect的执行逻辑 #

如果getData只是用来初始化数据，可直接让useEffect只在组件挂载时执行一次，不需要把getData作为依赖：

// 修改App组件中的useEffect
useEffect(() => {
    const data = getData();
    setData(data);
    console.log(data);
}, []); // 依赖数组为空，仅在组件挂载时执行一次

注意：这种方法仅适用于getData内部不需要依赖组件状态/Props的场景，如果后续getData需要依赖外部变量，建议优先使用前两种方案。

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