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

Question

"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.

Answer 1

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

For example:

const Dialog = dynamic(() => import('from-your-path'), {ssr: false});

Answer 2

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>
  );
};