Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why when I set property in a component it starts throwing hydration exceptions Next js

"use client";

const Component = ({ className }) => {
  const [open, setOpen] = useState(false);
  const [showNewOrganizationDialog, setShowNewOrganizationDialog] =
    useState(false);

  return (
    <Dialog
      open={showNewOrganizationDialog}
      onOpenChange={setShowNewOrganizationDialog}
    >
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>...</PopoverTrigger>
        <PopoverContent className="w-[200px] p-0">...</PopoverContent>
      </Popover>
      <DialogContent>...</DialogContent>
    </Dialog>
  );
};

This version of code works well. But if I set Popover property open={true} it starts throwing hydration exception.

"use client";

const Component = ({ className }) => {
  const [open, setOpen] = useState(false);
  const [showNewOrganizationDialog, setShowNewOrganizationDialog] =
    useState(false);

  return (
    <Dialog
      open={showNewOrganizationDialog}
      onOpenChange={setShowNewOrganizationDialog}
    >
      <Popover open={true} onOpenChange={setOpen}>
        <PopoverTrigger asChild>...</PopoverTrigger>
        <PopoverContent className="w-[200px] p-0">...</PopoverContent>
      </Popover>
      <DialogContent>...</DialogContent>
    </Dialog>
  );
};

Expected server HTML to contain a matching <div> in <div>.

The components diplayed are used in Nextjs app using shadcn/ui.

Tags:

2

Answers


  1. 0

    turn off ssr by dynamic import and set ssr to false in options.

    For example:

    const Dialog = dynamic(() => import('from-your-path'), {ssr: false});
    Login or Signup to reply.
  2. 0

    Another way to avoid hydration error:

    "use client";

const Component = ({ className }) => {
  const [open, setOpen] = useState(false);
  const [showNewOrganizationDialog, setShowNewOrganizationDialog] =
    useState(false);

  useEffect(() => {
    setOpen(true);
  }, [])

  return (
    <Dialog
      open={showNewOrganizationDialog}
      onOpenChange={setShowNewOrganizationDialog}
    >
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>...</PopoverTrigger>
        <PopoverContent className="w-[200px] p-0">...</PopoverContent>
      </Popover>
      <DialogContent>...</DialogContent>
    </Dialog>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search