Skip to content

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

@cbranch101

Description

@cbranch101

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions