prevent menu component from re-rendering-CodePudding

https://codesandbox.io/s/little-thunder-so1omh?file=/src/menu/menu.scss

this is my problem. when I refresh, menu opens and closes for a moment

I want to prevent this from re-render. this my console.log when i refresh every time:

false 'open'
menu.jsx:23 item
menu.jsx:25 rerendered
menu.jsx:22 true 'open'
menu.jsx:23 undefined 'item'
menu.jsx:25 rerendered

CodePudding user response：

this is not a bug but a feature, react after 16.3.0. will render twice as for development mode. see the issue on react repo below, happy coding, you doing great!

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

CodePudding user response：

There was an issue in SCSS. menu opens and closes is fixed now you can check

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

CodePudding user response：

I went through the code, its not the render that is causing the it to open and close, its the .collapse class animation

you can verify the case by using a ref

// style modification .hidden { visibility: hidden !important }

 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>

I think you need to keep the menu items collapsed to start with

Hope this helps you in finding a better solution