Open
Description
Steps to reproduce
Steps:
- Create a layout.tsx using NextAppProvider and pass session.
- Create a child component MyList.tsx and try to get the session using useSession.
- Return loading message if session is not available.
- Component is never refreshed after that unless refreshing the entire page.
References:
https://mui.com/toolpad/core/react-use-session/
https://mui.com/toolpad/core/react-use-session/api/
layout.tsx
export default async function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
const session = await auth();
return (
<html lang="en" data-toolpad-color-scheme="light">
<body>
<SessionProvider session={session}>
<AppRouterCacheProvider options={{ enableCssLayer: true }}>
<NextAppProvider
theme={theme}
navigation={NAVIGATION}
session={session}
authentication={AUTHENTICATION}
branding={{
logo: (
<img src="https://mui.com/static/logo.png" alt="MUI logo" />
),
title: "Learning Pathways",
}}
>
{children}
</NextAppProvider>
</AppRouterCacheProvider>
</SessionProvider>
</body>
</html>
);
}
PathwaysEnrolmentList.tsx
const PathwaysEnrolmentList: React.FC<PathwaysEnrolmentListProps> = ({}) => {
...
const session = useSession();
// Wait for session to be available
if (!session?.user?.id) {
return <div>Loading...</div>;
}
const userId = session.user.id;
....
<!-- Failed to upload "Screenshot 2025-05-28 at 8.53.27 am.png" -->
return (
<List sx={{ width: "100%", bgcolor: "background.paper" }}>
{pathways.map((pathway) => {
const isEnrolled = enrolledPathwayIds.has(pathway.id);
return (
<React.Fragment key={pathway.id}>
<ListItem
onClick={() => router.push(`/enrolment/${pathway.id}`)}
alignItems="flex-start"
sx={{
opacity: isEnrolled ? 0.6 : 1,
backgroundColor: !isEnrolled ? "#e3f2fd" : "#f5f5f5",
borderRadius: 2,
mb: 1,
transition: "background 0.2s",
"&:hover": {
backgroundColor: !isEnrolled ? "#90caf9" : "#f5f5f5",
},
}}
secondaryAction={
isEnrolled ? (
<BottomNavigationAction
onClick={(event) => handleUnEnrolClick(event, pathway.id)}
icon={<RestoreIcon />}
/>
) : (
<BottomNavigationAction
onClick={(event) => handleEnrolClick(event, pathway.id)}
icon={<AddIcon />}
/>
)
}
>
<ListItemAvatar>
<Avatar alt={pathway.description} src="put_the_path_here" />
</ListItemAvatar>
<ListItemText
primary={
isEnrolled
? pathway.description + " (ENROLLED)"
: pathway.description
}
secondary={
<Typography
component="span"
variant="body2"
sx={{ color: "text.primary", display: "inline" }}
>
{pathway.recommended_duration}
</Typography>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
</React.Fragment>
);
})}
</List>
);
};
export default PathwaysEnrolmentList;
Current behavior
Child component never gets refreshed when session is available.
Expected behavior
Child component gets refreshed when session is available.
Context
Im trying to use the session in the child component
Your environment
npx @mui/envinfo
System:
OS: macOS 15.1.1
Binaries:
Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
npm: 11.2.0 - ~/.nvm/versions/node/v20.17.0/bin/npm
pnpm: 10.10.0 - ~/.nvm/versions/node/v20.17.0/bin/pnpm
Browsers:
Chrome: 137.0.7151.41
Edge: 136.0.3240.92
Safari: 18.1.1
npmPackages:
@emotion/react: ^11 => 11.14.0
@emotion/styled: ^11 => 11.14.0
@mui/icons-material: ^7 => 7.1.0
@mui/material: ^7 => 7.1.0
@mui/material-nextjs: ^7 => 7.1.0
@mui/x-charts: ^8 => 8.3.0
@mui/x-data-grid: ^8 => 8.3.0
@mui/x-tree-view: ^8 => 8.3.0
@toolpad/core: ^0.14.0 => 0.14.0
@types/react: ^19.0.0 => 19.1.3
react: ^19.0.0 => 19.1.0
react-dom: ^19.0.0 => 19.1.0
typescript: ^5 => 5.8.3
Search keywords: session useSession not updated child component
Metadata
Metadata
Assignees
Projects
Status
No status