Предотвратить повторный рендеринг компонента меню

это не баг, а фича, реагируйте после 16.3.0. будет отображаться дважды, как в режиме разработки. см. проблему в реагирующем репозитории ниже, удачного кодирования, у вас все отлично!

https://github.com/facebook/react/issues/15074

Возникла проблема в SCSS. меню открывается и закрывается исправлено, теперь вы можете проверить

https://codesandbox.io/s/eager-microservice-b7p4gc?file=/src/menu/menu.scss

Я просмотрел код, его открытие и закрытие вызывает не рендеринг, а анимация класса .collapse.

вы можете проверить дело, используя реф

// модификация стиля .скрытый { видимость: скрыто !важно }

 // this is a flag to detect atleast one click 
 // on the menu item
 // this will be false when app loads the first time
 // then after user click on the menu, it will set to true
 let isSelectedOnce = React.useRef(false);

  const handleDropDown = (id) => {
    setItemPressed(id);
    if (itemPressed !== id) {
      setOpen(true);
    } else {
      setOpen((pre) => !pre);
    }
    if (!isSelectedOnce.current) {
      isSelectedOnce.current = true;
    }
  };

  return (
    ...
     <ul
        className = {`collapse ${
          open && itemPressed === "menu" ? "show" : ""
        }  ${!isSelectedOnce.current ? "hidden" : ""}`}
      >
        <li>Menu Category</li>
        <li>products list</li>
        <li>Add product</li>
      </ul>
     </li>

Я думаю, вам нужно держать пункты меню свернутыми, чтобы начать с

Надеюсь, это поможет вам найти лучшее решение

Редактировать: больше о когда использовать ссылки