Mui Autocomplete combined with a popper component is causing a major leak when deployed to Heroku?

user_15357136 0
Viewed 1170

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>

reactjs heroku
1 Answers

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

user_153571360
Related