React：即使自定义挂钩值没有改变，为什么我的组件会重新渲染？

Question

我正在 React 中使用嵌套的自定义挂钩，并且在父组件中遇到意外的重新渲染，即使从其中一个自定义挂钩返回的值保持不变。具体来说，useIsAdmin 挂钩依赖于 useSession 中的会话数据，但即使会话的角色没有更改，父组件也会重新呈现。

这是我的代码的简化版本：

// Custom hook to check if user is admin
export const useIsAdmin = () => {
  const { data: session } = useSession(); // Fetch session data

  // Check if the user's roles match the required admin roles
  return useMemo(
    () =>
      ADMIN_READ.every((role) =>
        session?.roles?.find((userRole) => userRole === role)
      ),
    [session?.roles]
  );
};

问题：

useIsAdmin 钩子是中间的自定义钩子。每次 useSession 获取会话时，即使 session.roles 值保持不变，父组件仍然会重新渲染。我希望只要 session.roles 没有改变，useMemo 就能防止重新渲染。

我尝试过的：

• 我已经检查过角色是否完全相等，但无论如何都会重新渲染。
• 尝试对父组件使用 React.memo 来防止不必要的重新渲染，但它仍然发生。
• 已验证 session.roles 在渲染之间保持相同。

问题：

session.roles 相同的情况下，useIsAdmin 结果没有变化，为什么父组件会重新渲染？我在这个嵌套钩子设置中使用 useSession 或 useMemo 的方式有问题吗？

附加信息：

• 我正在使用React v18.3.1
• 每当 useSession 获取数据时，父组件都会重新渲染，尽管 session.roles 保持不变。

想要防止组件在最后一个子自定义挂钩返回相同数据时重新渲染

Answer 1

我已经检查了角色是否完全相等，但无论如何都会重新渲染。

React 在状态改变时渲染参考。深度平等在这里并不重要；重要的是。如果您使用相同的值重新创建一个新数组，这将触发重新渲染。

看看您的

useSession

钩子是什么样子会有所帮助。