I'm currently working on developing a Next.js application, and I've encountered a problem while trying to implement the useClient hook in one of my components. Whenever I include the useClient hook in my component, I end up receiving a "Maximum call stack exceeded" error, suggesting some sort of recursion or infinite loop.
"use client"
import { serverPropsWithMembers } from "@/types"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { ChevronDown, LogOut, PlusCircle, Settings, Trash, UserPlus, Users } from 'lucide-react'
import { Role } from "@/Models/schema-models"
import { useModel } from "@/app/hooks/use-model-store"
interface serverHeaderProps{
server:serverPropsWithMembers,
role?:Role
}
const ServerHeader = ({
server,
role
}:serverHeaderProps) => {
const { onOpen } = useModel()
const isAdmin = role === Role.ADMIN
const isModerator = isAdmin || role === Role.MODERATOR
return (
<DropdownMenu>
<DropdownMenuTrigger className="focus:outline-none" asChild>
<button className="h-12 w-full text-md px-3 font-semibold bg-neutral-200 dark:bg-neutral-800 hover:bg-zinc-900/10 dark:hover:bg-zinc-900/50 flex items-center border-b-2">
{server.name}
<ChevronDown className="h-5 w-5 ml-auto"/>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="text-xs font-medium w-56 items-center text-black space-y-[2px] dark:text-neutral-400 ">
{isModerator && (
<DropdownMenuItem
onClick={()=> onOpen('invite',{server})}
className="px-3 py-2 text-sm cursor-pointer">
Invite People
<UserPlus className='h-4 w-5 ml-auto'/>
</DropdownMenuItem>
)}
{isAdmin && (
<DropdownMenuItem className=" px-3 py-2 text-sm cursor-pointer">
Server settings
<Settings className='h-4 w-4 ml-auto'/>
</DropdownMenuItem>
)}
{isAdmin && (
<DropdownMenuItem className=" px-3 py-2 text-sm cursor-pointer">
Manage Members
<Users className='h-4 w-4 ml-auto'/>
</DropdownMenuItem>
)}
{isAdmin && (
<DropdownMenuItem className=" px-3 py-2 text-sm cursor-pointer">
create Channel
<PlusCircle className='h-4 w-4 ml-auto'/>
</DropdownMenuItem>
)}
{isModerator && (
<DropdownMenuItem className="px-3 py-2 text-sm cursor-pointer">
<DropdownMenuSeparator className='dark:bg-zinc-600 w-full rounded-md'/>
</DropdownMenuItem>
)}
{isAdmin && (
<DropdownMenuItem className="text-rose-500 px-3 py-2 text-sm cursor-pointer"&
hellip;The issue disappears when I remove the "use client" part, but unfortunately, I require the use of "use client" due to the reliance on the useModel Hook. I have thoroughly checked all dependencies for conflicts that may be causing recursion, but haven't found any. Can anyone provide guidance on how to resolve this dilemma within my Next.js file?
import { create } from 'zustand'
import { Server } from '@/Models/schema-models';
import { serverPropsWithMembers } from '@/types';
export type ModelType = "createServer" | "invite"
interface ModelData {
server?:serverPropsWithMembers
}
interface ModelStore {
type: ModelType | null;
data:ModelData;
isOpen: boolean;
onOpen: (type:ModelType,data?: ModelData) => void;
onClose: () => void;
}
export const useModel = create<ModelStore>((set)=>({
type :null,
data:{},
isOpen:false,
onOpen:(type,data={}) => set({isOpen:true,type,data}),
onClose:() => set({isOpen:false,type:null})
}))
Below are the serverWithMembers types:
import { IMember, IServer, IUser } from "./Models/schema-models"
export type serverPropsWithMembers = IServer & {
members:IMember & {
UserProfile : IUser
}}
Additionally, here are the Schema files:
import mongoose, { Schema, Types, model, models } from 'mongoose';
♥export interface IUser {
userId:string,
name:string,
email:string,
imageUrl:string,
server:Types.ObjectId[],
members:Types.ObjectId[],
channels:Types.ObjectId[]
}
const UserProfileSchema = new Schema<IUser>({
userId: { type: String, unique: true },
name: String,
email: {type:String,index:true , unique:true},
imageUrl: {type: String,index:true},
server:[{type:Schema.Types.ObjectId,ref:'Server'}],
members:[{type:Schema.Types.ObjectId,ref:'Members'}],
channels:[{type:Schema.Types.ObjectId,ref:'Channels'}]
}, {
timestamps: true
});
const UserProfile = models?.['UserProfile'] || model<IUser>('UserProfile', UserProfileSchema);
...
export { UserProfile, Server , Members , Channels };