Only trigger UseEffect() in Material UI Dialog when it is in opened-CodePudding

I have a parent component that contains a Material UI Dialog (child). Now this dialog's purpose is to fetch and display data from the REST API.

Currently this works by implementing UseEffect() in the Dialog component. However as soon as the parent component is mounted, the UseEffect() inside child component will kick in. The problem is I will be missing information that are supposed to be passed from the parent to the child itself (because both of this component are mounted at the same time).

Now what got me thinking is, I want that this dialog only be mounted when the button to show it is being clicked. Is that possible?

This is the snippet:

Parent.js

    const Parent = React.forwardRef((props, ref) => {

            const [openChildDialog, setOpenChildDialog] = useState(false)
    
        useEffect(() => {
// function here. This also going to set value in a state that will be used for the child component
        })

        const handleOpenChildDialog = () => {
            setOpenChildDialog(true)
        }
        const handleCloseChildDialog = () => {
            setOpenChildDialog(false)
        }
        
            return (
                <Page>
                    <PageTitle>
                        Parent Component Test
                    </PageTitle>

                // Dialog will only be mounted when this button is clicked.
                <Button onClick={handleOpenChildDialog}> Open the child dialog! </Button>
    
                    <ChildDialog
                        open={openChildDialog}
                        onClose={handleCloseChildDialog}
                    />
                </Page>
            )
        })

If what I am asking is not possible, then I am open to alternative as long as the UseEffect() inside the child dialog component is not immediately executed when the parent is mounted.

CodePudding user response：

UseEffect() behaves so that it is executed when the component is mounted, updated and unmounted. However the solution I see here it is using a conditional to render your child component when your openChildDialog change to true

{ openChildDialog &&
    <ChildDialog
        open={handleOpenChildDialog}
        onClose={handleCloseChildDialog}
    />

}

I leave you this incredible guide so you can see in depth how to use this hook: https://overreacted.io/a-complete-guide-to-useeffect/

CodePudding user response：

to only render the ChildDialog component when it's open, simply wrap it in a conditional:

{ openChildDialog && (
  <ChildDialog
    open={openChildDialog}
    onClose={handleCloseChildDialog}
  />
)}

in terms of your useEffect - you can include an array as the 2nd parameter of a useEffect, and then the funciton will only run when anything in the array changes, for example:

useEffect(() => {
  // this will run whenever any state or prop changes, as you haven't supplied a second parameter
})

useEffect(() => {
  // this will now only run when openChildDialog changes
  // you can easily put a check in here to see if openChildDialog is true to only run on open
}, [openChildDialog])

useEffect(() => {
  // an empty array means this will only run when the component is first mounted
}, [])

so to answer your useEffect-inside-child running error, you could do something like:

useEffect(() => {
 if (open) {
   // do stuff only when the open prop changes to true here
 }
}, [open])