I'm working with nested custom hooks in React, and I'm experiencing an unexpected re-render in my parent component, even though the value returned from one of the custom hooks remains unchanged. Specifically, the useIsAdmin hook depends on the session data from useSession, but even when the session's roles don't change, the parent component re-renders.
Here’s a simplified version of my code:
// 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]
);
};
Issue:
The useIsAdmin hook is the middle custom hook. Each time useSession fetches the session, even though the session.roles value remains the same, the parent component still re-renders. I expected the useMemo to prevent re-renders as long as session.roles hasn’t changed.
What I’ve tried:
Question:
Why is the parent component re-rendering even though useIsAdmin's result doesn't change when session.roles is the same? Is there a problem with how I’m using useSession or useMemo in this nested hook setup?
Additional Info:
Want to prevent the component rerendering whenever last child custom hook return same data
I've checked if the roles are deeply equal but the re-render happens regardless.
React renders when the state changes reference. Deep equality isn't important here; if you're creating a new array with the same values, that will trigger a re-render.
It would help to see what your useSession
hook looks like.