Duplicated Sidebar Drawer components with the same content even using single Edge Sidebar

[ghost]

There are always 2 generated Sidebar Drawer components with the same content even using single Edge Sidebar. Seems the difference is only "display: none" property. You can reproduce it by chrome dev tools right clicking on any preset or example layout from https://mui-treasury.com/layout/presets/

React dev tools shows that all variants of Edge Sidebars (temporary, persistent, permanent) generates with the same content even using only one type. Actually I did not investigate the logic behind the sidebar creation process, but for me this is a bug. For example I want to fetch some data from remote server on sidebar content using React's hooks api when sidebar triggered or even the props of Root has been component changed. Then it will do the same operation more than 1 time. You can reproduce it just create simple component "Issue.tsx", add to sidebar content and try to change props.

const Issue = (someText: string) => {
    useEffect(() => {
        console.log("component mounted") // Will be called more than once
    }, []);

    return <>
        <span>{someText}</span>
    </>   
};

This is same for componentDidMount if using class components.

Here is sample from https://mui-treasury.com/layout/presets/mui-treasury/

[siriwatknp]

Thanks for putting this up. In v4, all 3 drawers (temporary, persistent & permanent) will be rendered. The purpose of this is to leverage css over js because it does not work well with server-side rendering in v3.

consider this implementation using js (v3)

const screen = useScreen() // will return 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined
render() {
  return (
    <Drawer variant={variants[screen]} />
  )
}

The problem with this approach is there is no screen at server-side, the layout will lose sidebar at first paint and then when javascript run, sidebar appears. This is quite bad experience compare to hidden approach.

How to workaround in your case

I suggest that you lift your state and api call up and make your component pure (only ui renderer)
something like this

function App() {
  const [data, setData] = useState()
  useEffect(() => {
     callAPI().then(response => setData)
  }, [])
  return (
    <Root>
       <DrawerSidebar>
          <YourComponent data={data} />
       </DrawerSidebar>
    <Root>
  )
}

[ghost]

Hi, thanks for quick response. In that case you right. There are also can be several ways to achieve this:

1 way) Adding-implementing some new flags (ex. serverSideRendering) to Root or scheme or builder or even leaf components like drawers.. With this way we can seperate logics for both serverside and client side renderings.

2 way) We continue rendering all drawers but except adding (reusing) children only to active drawer and rest will have an empty content.

[rosostolato]

Hey everyone, I'm using version 4.5.0 and still have this issue... is it fixed?

My problem is to run cypress, because it's duplicating the component tags. Actually I'm getting the sidebar 3 times: 2 inside Root component and 1 inside <div role="presentation" class="MuiDrawer-root MuiDrawer-modal" ... that is the one outside <div id="root">

This is the result of querying this single tag: