'Material-UI Select: Prevent re-render after selection

In my project a user can choose an icon from 700 icons, the way I was supposed to make them choose is by using a select.

This is a screenshot from the mock-up: Mockup icon select.

So I made this:

 <BootstrapSelect
      displayEmpty
      value={selectedIcon}
      onChange={handleChange}
      input={<OutlinedInput />}
      IconComponent={KeyboardArrowDownIcon}
     >

    {iconsList.map((item,i) => {
        let Ele = Icons[item];
        return(
        <MenuItem
          key={item}
          value={item}
        >
            <Ele />
            {item}
        </MenuItem>)
      })}
    </BootstrapSelect>

The problem is, every time I press on the select the MenuItem elements re-render and this is really time-consuming (10 seconds to make the options showing). Is there a way to make the menu-items render only once?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source