react-view-slot
react-view-slot copied to clipboard
Changing deps array in Plug causes child components to totally unmount and remount
In the below example, changing content
will cause first render
to be called a second time.
This is really problematic for trying to manage the lifecycle of any components that are children of plugs.
const Parent = ({ children, setContent }) => {
return (
<div>
<Slot />
<Button onClick={() => setContent('updated content')}>
Set Content
</Button>
{children}
</div>
)
}
const UnderChild = ({ content }) => {
useEffect(() => {
console.log('first render')
}, [])
return <div>{content}</div>
}
const Child = ({ content }) => {
return (
<Plug deps={[content]}>
<UnderChild content={content} />
</Plug>
)
}
const App = () => {
const [content, setContent] = useState('Initial Content')
return (
<SlotProvider>
<Parent setContent={setContent}>
<Child content={content} />
</Parent>
</SlotProvider>
)
}