Maximum update depth exceeded error with hover card #2717
Comments
|
I see some other warning: It's unlikely to be an issue with the primitive, but rather with the specific setup. I will close the issue now, but feel free to keep chatting if you have more info to present. |
Hi @benoitgrelard — thanks for responding. I am using NextJS in my own application (where I am encountering the issue), which should already be using createRoot. I'm wondering if it's a clue though that something in my setup may be causing the issue. Any other ideas why this may be happening? |
|
I'm getting this as well in Next - the only useful info to debug is that popper appears in the call stack: I also have a popover that re-renders frequently, and then causes this error. This does seem like an issue with the primitive. |
|
I am also getting this issue when using Popover |
|
Same here, for me, it happens when I'm resizing the window. |
|
Happened to me on a page where I was using 50+ popovers. |
|
Something is definitely not right here. I have a common component for navigation buttons with a tooltip. I've got probably 4-6 of these on screen at a time, and occasional re-renders cause this error with a huge depth. |
|
Glad I'm not alone. This is not an actual fix but for my own purposes I've just wrapped my component in an error boundary for now so that it doesn't bubble up and crash the entire application. Hopefully this can be properly fixed though. |
|
I am also experiencing this with many HoverCards that re-render often. Would appreciate any pointers to fix this! |
|
@benoitgrelard Would we be able to reopen this issue as it seems like many others are also experiencing the same bug. Thank you! |
|
Got similar issue when using Radix-ui dropdown menu with Next.js. Please take a look at this! @benoitgrelard The console report Maximum update depth exceeded too. |
|
Having the same issue with Nextjs + Radix + reactflow when a context menu wraps over the nodes and the nodes start being dragged |
|
Did anyone found some workaround? I am getting this error also with the |
|
We also experience the issue with shadcn Tooltip in a Next.js app :( |
|
@benoitgrelard any ideas or will this issue be reopened as it seems to be a recurring issue? |
|
I suddenly started getting this error out of no where. The popover worked fine a few months back and now all of a sudden I am getting this. |
|
Also experiencing this when using Radix Dialog that has a material UI Popover or Select component inside: 
|
I am actually considering switching to Daisy UI instead of using Shadcn because of this. This is a UI breaking bug. And seems like there is no activity on this. |
At the first glance I thought it was due to my misuses of useEffect, but after reviewing people's comments, looks like it's not my fault🥲. It takes me a while to end up here ... |
|
Folks, I upgraded my react version to the latest minor version of major version 18. This seems to have been fixed since then. Give it a try. |
|
any updates here? on react 19.0.0 (latest), still happening, so unfortunately no option to upgrade |
|
I have the same error using a DropdownMenu. |
Are you using React 19? To me worked out downgrading to React 18 |
|
I am encountering the same problem when using a few dozen Popovers. @benoitgrelard please consider reopening this issue as this doesn't seems to have something to do with the setup you mentioned. |
|
Having the same problem with several popovers as well. Using react 18.3.1 and NextJS 14. |
|
@benoitgrelard bunch of others facing the same issue, please reconsider reopening or opening a new one. Should be investigated and should be compatible with React 19 |
|
+1 to this, exact same issue |
|
This also happens with the Collapsible component, I highly recommend migrating to ark-ui primitives as I've had nothing but problems with radix unfortunately |
|
Ive created this issue to reopen this as so many of us are still experiencing this issue even with the latest versions: #2717 On the meanwhile, has anyone found a workaround? |
|
Yo! This fix on a fork I made solved the issue for me, in case it can help anyone else I opened a PR: #3386 |
|
@benoitgrelard Do we still think this is something with his setup? If so, how can we solve it? |
|
I'm having this issue using this code: import { Check, ChevronsUpDown } from "lucide-react";
import * as React from "react";
import { PopoverTrigger } from "@radix-ui/react-popover";
import { useControllableState } from "@radix-ui/react-use-controllable-state";
import { CommandLoading } from "cmdk";
import { cn } from "../../lib/utils";
import { Button } from "./button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command";
import { Popover, PopoverContent } from "./popover";
interface Props {
t?: {
placeholder: string;
empty: string;
loading: string;
};
value?: string;
onChange?: (value: string) => void;
onTextChange?: (text: string) => void;
loading?: boolean;
creatable?: boolean;
prefix?: React.ReactNode;
className?: string;
options?: {
id?: string;
name?: string;
value: string;
label?: React.ReactNode;
}[];
}
export function Combobox(props: Props) {
const [open, setOpen] = React.useState(false);
const [text, settext] = React.useState("");
const [value, setValue] = useControllableState({
prop: props.value,
defaultProp: "",
onChange: props.onChange,
});
const options = React.useMemo(() => {
return (
props.options?.map((option) => ({
value: option.id || option.value || option.label,
label: option.name || option.label || option.value,
})) || []
).concat(text ? [{ value: text, label: text }] : []);
}, [props.options, text]);
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
aria-expanded={open}
className={cn("w-full justify-between px-2", props.className)}
onClick={() => setOpen(!open)}
>
<span className="flex gap-2 items-center">
{props.prefix}
{value ? (
options.find((option) => option.value === value)?.label
) : (
<span>{props.t?.placeholder || ""}</span>
)}
</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0">
<Command shouldFilter={false}>
<CommandInput
placeholder={props.t?.placeholder}
onValueChange={(value) => {
if (props.creatable) settext(value);
props.onTextChange?.(value);
}}
/>
<CommandEmpty>{props.t?.empty}</CommandEmpty>
{(!props.options || props.loading) && props.t?.loading && (
<CommandLoading>{props.t.loading}</CommandLoading>
)}
<CommandList>
<CommandGroup>
{options.map((option) => (
<CommandItem
key={option.value as string}
value={option.value as string}
className="gap-2 justify-between"
onSelect={(currentValue) => {
const select = currentValue === value ? "" : currentValue;
setValue(select);
setOpen(false);
}}
>
<div className="flex gap-2 items-center">{option.label}</div>
<Check
className={cn("h-4 w-4", value === option.value ? "opacity-100" : "opacity-0")}
/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}the imports are shadcn related, so you can just import its components |
|
this is the error stacktrace from react:
|
|
Does forking with this fix work for you @darklight9811 ? #3386 |
|
@Randulfe sadly not, I dont even have the context-menu package installed, the bug Im encountering is here:
(maybe the effect without a deps array) |
|
We switched from @radix-ui/tootltip to floating-ui (aka Popper.js) and are still seeing this error. I suspect since radix-ui is using floating-ui under the hood this might be an issue with the underlying library and not necessarily an issue with radix-ui itself. I'm going to see if I can refactor OP's repro sandbox to demonstrate this using floating UI. |
|
primitives/packages/react/popper/src/popper.tsx Lines 73 to 89 in 6e75e11 Is there a reason why |
|
any solution for this? running into the same using popover |
and others
Bug report
Current Behavior
Been banging my head against the wall with this one, so maybe someone has an idea on how to fix this.
Here is the full error stack trace:
I am getting this error primarily when I am using the Radix hover card with code that re-renders frequently (in my case,
react-query). This can be seen in the minimal reproduction linked later in this post. Asreact-query's useQuery hook rerenders its parent, it causes the HoverCard to mount and rerender, causing the error. I've tried to memoize the hover card, but this did not fix the issue.Expected behavior
Error should not occur
Reproducible example
CodeSandbox Reproduction
Steps to reproduce
Preview consolein the CodeSandboxSuggested solution
It seems to be related to the
onAnchorChangefunction call, but i'm not sure precisely how to solve this or where the root problem is (the library or my code).Additional context
No error is thrown if I only render a few buttons. Seems like React has a built in max limit before it throws an error.
For my use case where I need to render 50-100 items at once with a hover card for each item, this error is a breaking issue.
Your environment
The text was updated successfully, but these errors were encountered: