Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
cbranch101 opened this issue Jan 15, 2021 · 0 comments

Comments

@cbranch101
Copy link

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>
    )
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant