async/await is not yet supported in Client Components
Answered
Florida White posted this in #help-forum
Florida WhiteOP
i have this page which uses use client directive,
inside my useTelegram hook, i have an async function, which results to exception error "async/await is not yet supported in Client Components"
'use client'
import { useTelegram } from '@/core/hooks/telegram'
export default function Home() {
const { initData, telegramSDK, colorScheme, themeParams, viewportHeight, avatar } = useTelegram()
return (
<Box className='flex flex-col gap-4'>
</Box>
)
}inside my useTelegram hook, i have an async function, which results to exception error "async/await is not yet supported in Client Components"
export const useTelegram = () => {
const fetchUserProfilePhotos = async (userId: number) => {
}
const avatar = useMemo(async () => {
return await fetchUserProfilePhotos(initData?.user?.id)
}, [initData?.user?.id])
}Answered by Asian black bear
You're passing an async function to
useMemo and this is likely the reason for the error. It cannot be be async.6 Replies
Florida WhiteOP
Asian black bear
You're passing an async function to
useMemo and this is likely the reason for the error. It cannot be be async.Answer
Florida WhiteOP
using useState bypassed the issue, however not passing async to usememo and calling the function directly inside the hook body would have also thrown this error
Asian black bear
Yeah because client components and hooks can't call async functions since client components cannot be async.
You'd have to use a state and initialize it using an effect or just pass down fetched data from a server component.
Florida WhiteOP
thank you sir