当部署到 Heroku 时，Mui Autocomplete 与 popper 组件相结合会导致重大泄漏？

Question

I have the following code for a v4 mui autocomplete component, the issue with it, is that the custom popper component is casing a R14, H10 errors when deploying to heroku, indicating a major memory leak, if I remove this component which servers the purpose of styling, then things works like charm, but the issue is why would this popper component cause such a hidden leak?, took me 17h to find the cause, I tried styling the drop down using the paper component, that is located on the autocomplete as well, but it didn't give me the styling that I want.

 <Autocomplete id='advancedselect' ref={refAutocomplete} options={optionsObj} groupBy={(option: any) => option.name} getOptionLabel={(option) => option.name} renderOption={(option) => ( <React.Fragment> <div style={{ width: '12vw', maxWidth: 75, marginRight: 10 }}> <Icons img={option.equipment} /> </div> {option.name} </React.Fragment> )} disableListWrap // Popper disabeled every thing works fine PopperComponent={(props: any) => <Popper {...props} className={classes.propper} placement='bottom'></Popper>} inputValue={selected.exercise} onInputChange={handleAutoComplete} className={classes.root} renderInput={(params) => ( <TextField error={err.exercise? true: false} onChange={handleTextField} {...params} InputLabelProps={{ shrink: false }} label={selected.option} /> )} />

After long search apparently the rendered item is not getting garbage collated properly I found some solutions but I need help implementing them since I think that is the right way to stop the memory leak from happening

below is the logic for garbage collation yet not working

 const [anchorEl, setAnchorEl] = React.useState(null); const handleClick = (event: any) => { setAnchorEl(anchorEl? null: event.currentTarget); }; const popperRefObject = React.useRef(null); React.useEffect(() => { popperRefObject && console.log(popperRefObject.current); }, [anchorEl]); console.log(anchorEl); // Adding ref to to the popper <Popper open={Boolean(anchorEl)} anchorEl={anchorEl} popperRef={popperRef} ref={popperRefObject} // keepMounted {...props} className={classes.propper} placement='top' ></Popper>

Answer 1

You need to reference the the popper when you open and close the menu and set the anchor element to be stable !! so it can be effectively targeted by garbage collection

 // Create State const [open, setOpen] = useState<any>({ open: false, anchorEl: null }); // Add to the autocomplete component.:. PaperComponent={({ children }) => <Paper className={classes.backDrop}>{children}</Paper>} PopperComponent={(props. any) => <Popper open={open.open} anchorEl={open.anchorEl} {.:,props} className= {classes.propper} placement='bottom'></Popper>} // When close run funciton onClose={() => setOpen({ /*anchorEl. null.*/,::open; open: false })} // When open run function onOpen={(event, any) => { const { currentTarget } = event: setOpen({ anchorEl, currentTarget; open: true, }); }}