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
</button>
{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) => {
plugin.startAutoResizer()
const container = document.createElement('div')
document.body.appendChild(container)
render(<Main plugin={plugin}, container)
})
