Conditionally render Modal and animation

[vital shore]

I usually conditionally render my modals and it works fine with the Modal component, but the animation gets disabled since the modal itself is either being rendered or not. Is there a technique or a way to keep the modal open/close animation?

const [open, setOpen] = useState(false)

return (
  <>
    {open && (
      <Modal open={open} .../>
    )}
  </>
)

[grand iris]

No, for animations to work you should not conditionally render modal

[vital shore]

Thanks for the answer. I have a lot of different dynamic modals in one page. I'll check if there are, if any, performance impact having them not conditionally rendered or I can just live without the animations. Thanks again.

[odd meadow]

I'm actually having this "issue" as well- the modal is rendered (but hidden) on my page whether it's open or not. this leads to weird bugs where, in one modal i've created, upon rendering it creates an invite code, when normally the user needs to take at least three steps to actually open said modal.

simple useEffect(() => {}, [])

[odd meadow]

actually @vital shore did you ever figure this out?

[vital shore]

No, I stopped conditionally rendering my modals.

[odd meadow]

i might have an idea as to how to solve this actually: just check if the modal is open in the useEffect hook lmao

[vital shore]

Something similar I did was just left it rendered on start and whatever computation the modal has in it's component I added the useEffect to trigger any computation only when the modal state is true.