Component unmount is not calling for plugins when moving out of the content page

I’ve a plugin, build using React, and I want to unsubscribe some subscriptions and also destroy instances on unmount of the component. But looks like unMount is never calling when moving outside of the content page where the plugins are displayed.

Just for testing purpose, I’ve created two parent & child test components with consoles logs when on mount and unmount. And when toggling the button, child unmounted but when moving outside of the content page, both components are not unmounted looking at the logs.

const Main = () => {
  const [showChild, setShowChild] = useState(true)

  useEffect(() => {
    console.log('Parent Mounted')
    return () => console.log('Parent Unmounted')
  }, [])

  return (
      <button className='desmos-btn' onClick={() => setShowChild(!showChild)}>
        Toggle Child
      {showChild && <ChildComponent />}

const ChildComponent = () => {
  useEffect(() => {
    console.log('Child Mounted')
    return () => console.log('Child UnMounted')
  }, [])

  return 'Child'

And just so you know the plugin is built using V1,

window.DatoCmsPlugin.init((plugin) => {

  const container = document.createElement('div')
  render(<Main plugin={plugin}, container)

Screen Recording 2022-11-19 at 01.07.48 PM

I think this is just the way React works. When you change page, the iframe containing the plugin is destroyed, but this does not trigger an unmount event. You can try using something like to catch the iframe closing event?

Hi, thanks. It does only trigger unmount on page refresh, and it doesn’t trigger it when clicking back button to open another record.

This has more to do with the way browsers handle unload events on iframes when removing them from the page, than with DatoCMS or our Plugin SDK… I’ve found some information here, it seems that different browsers have different strategies :confused: Spec for iframe removal from the document doesn't match browser behavior · Issue #4611 · whatwg/html · GitHub