[Solved]-React Hooks: how to prevent re-rendering the whole component when only the props.children value changes?-Reactjs

The Layout itself must be re rendered, because it has new children, however you can prevent MenuBar and Footer components from re rendering by creating them using React.memo:

const MenuBar = React.memo(function MyComponent(props) {
  /* render using props, it won't re rerender unless props change */
});