Why does zoid.destroy() throw an error when it destroys components?

I need to create a react zoid component during the render phase, based on some props where we don’t know the tag or url ahead of time. My component looks like this;

export const ZoidComponent = ({ tag, url, ...props }) => {
  const Zoid = useMemo(() => {
    zoid.destroy()
    return zoid.create({ tag, url }).driver("react", { React, ReactDOM })
  }, [tag, url])

  return Zoid ? <Zoid {...props} /> : null;
}

The component above works fine and as expected, however, there’s a niggly Uncaught Error: zoid destroyed all. I destroy before creating because if I don’t, I get the error Can not register multiple components with the same tag.

Why does it throw this error if it destroyed it successfully?

[devdiegoman]

Hi @bluepnume

So, how could we update the URL of the Zoid-component that was created with a specific URL? I mean, it’s possible to update the URL of the component used in the create function from Zoid?

[bluepnume]

Fair enough 😃

That’s why I suggested setting url as a function though. Based on the props passed, you can generate totally different urls.