react-view-slot icon indicating copy to clipboard operation
react-view-slot copied to clipboard

Changing deps array in Plug causes child components to totally unmount and remount

Open cbranch101 opened this issue 4 years ago • 0 comments

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>
    )
}

cbranch101 avatar Jan 15 '21 17:01 cbranch101