Re-render issue while performing open and setOpen using shadcn

[Akshaypmna18]

https://stackoverflow.com/questions/77826561/shadcn-reusuable-dialog-component-called-twice-renders-update-form-only

I have implemented a reusable dialog component using Shadcn in my todo app. However, I'm encountering an issue where the component is not working as needed. The add form and update form opens only after clicking twice. And when we click the pencil icon immediately after adding a todo it will pop add form instead of update form. I'm using zustand for state management.

Dialog Component

export default function DialogModal({ children, id, text }) {
  const { handleTodo, todo, setTodo, isOpen, setIsOpen } = useTodo(
    (state) => state
  );
  return (
    <Dialog open={isOpen} onOpenChange={() => setIsOpen()}>
      <DialogTrigger>{children}</DialogTrigger>
      <DialogContent className="max-w-[400px]">
        <DialogHeader>
          <DialogTitle className="bold text-[calc(1.25rem+.5vw)]">
            <big>{id ? "Update Task" : "Add Task"}</big>
          </DialogTitle>
        </DialogHeader>
        <Input
          className="font-[poppins]"
          placeholder="Enter the task..."
          defaultValue={text}
          onChange={(e) => setTodo(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") handleTodo(todo.trim(), id);
          }}
        />
        <DialogFooter>
          <Button
            className="text-[calc(1rem+.5vw)] mx-auto w-[min(90%,10rem)]"
            onClick={() => handleTodo(todo.trim(), id)}
          >
            {id ? "Update" : "Add"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

If I set 'setIsOpen(!isOpen)' the dialog component only shows the latest todo

update todo

     <DialogModal id={id} text={text}>
      <ToolTipComp Content={() => <ToolTipContent />}>
        <Pencil2Icon
          onClick={() => setIsOpen(true)}
          className="min-h-[1.5rem] min-w-[1.5rem] cursor-pointer hover:text-rose-500"
        />
      </ToolTipComp>
    </DialogModal>

add todo

    <DialogModal>
      <Button
        onClick={() => setIsOpen(true)}
        className="font-[poppins] fixed right-[calc(2.5rem+1vw)] bottom-[calc(3rem+1vh)] text-[calc(2rem+1vw)] rounded-full h-[calc(2.5rem+1vw)] w-[calc(2.5rem+1vw)]"
      >
        +
      </Button>
    </DialogModal>

demo

dialog component code

add todo code

update todo code

zustand store code

video for better understanding

Use devices with a width below 640 pixels or adjust it in the browser.

[dbritto-dev]

@Akshaypmna18 let me look into that, I've got exp with Radix Ui and Shadcn UI

[Akshaypmna18]

Thank you for your insights on Radix UI and Shadcn UI. I'll ensure to respect composition abstraction and use the next state on change events, following your valuable advice. Thanks for your expertise and feedback. Open to more insights!

[Akshaypmna18]

@dbritto-dev I have gone through your code. And it is sad to say that the code is not working as intended.

video

[dbritto-dev]

@dbritto-dev I have gone through your code. And it is sad to say that the code is not working as intended.

video

What's the issue? Looks good to me. The previous version wasn't working because you need to do double click the first time

[dbritto-dev]

@Akshaypmna18 here you go -> Akshaypmna18/to-do#2 (the fix for the issue related to dialog showing up the latest todo)

[Akshaypmna18]

Great pal

[dai-shi]

#2356 (comment)

[dbritto-dev]

@dai-shi nothing to do with zustand, the issue was related to a poor implementation -> Akshaypmna18/to-do#2 I could explain what was the issue and the fixes if is necessary

[Akshaypmna18]

@dai-shi sorry for the trouble. I thought it was the issue of zustand