title: React grid layout not redrawing when sidebar opens
body: <p>The Grid layout grid doesn't change shape unless there is a window update, for example opening the developer tools. The state is changing in the when the sidebar opens.</p>
  <p>This issues doesn't occur when I do no set a width property on <code>&lt;GridLayout&gt;</code> but then there is no width.</p>
  <p>I have attached 3 screenshots to show the issues</p>
  <ol>
  <li><p>the sidebar is closed.
  <a href="https://i.stack.imgur.com/HsDj5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HsDj5.png" alt="enter image description here" /></a></p>
  </li>
  <li><p>The sidebar opens but the grid falls underneath it.
  <a href="https://i.stack.imgur.com/N1vu0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N1vu0.png" alt="enter image description here" /></a></p>
  </li>
  <li><p>Opening the developer tools (or even moving the developer tools if their open) snaps the grid into the correct place.
  <a href="https://i.stack.imgur.com/f4RWE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f4RWE.png" alt="enter image description here" /></a></p>
  </li>
  </ol>
  <p>I have tried many variations including the re-sizeable grid but to no avail.</p>
  <p>The relevant code is:</p>
  <pre><code>import RGL, { WidthProvider, Layout } from &quot;react-grid-layout&quot;;
  import &quot;../../../../../../node_modules/react-grid-layout/css/styles.css&quot;;
  const GridLayout = WidthProvider(RGL);
  
    const defaultProps = {
      className: &quot;layout&quot;,
      items: 20,
      rowHeight: 30,
      onLayoutChange: function(layout: any) {},
      cols: 12,
    };
  
    const [layoutState, setLayoutState] = useState(defaultProps);
  
    const generateDOM = () =&gt; {
      return _.map(_.range(layoutState.items), (i) =&gt; (
        &lt;div key={i} style={{ border: &quot;2px solid red&quot;, margin: &quot;5px&quot; }}&gt;
          &lt;span className=&quot;text&quot;&gt;{i}&lt;/span&gt;
        &lt;/div&gt;
      ));
    };
  
    const generateLayout = () =&gt; {
      const p = layoutState;
      return _.map(new Array(p.items), function(item, i) {
        const y = _.result(p, &quot;y&quot;) || Math.ceil(Math.random() * 4) + 1;
        return {
          x: (i * 2) % 12,
          y: Math.floor(i / 6) * (y as number),
          w: 2,
          h: y,
          i: i.toString(),
        };
      });
    };
  
    const [layoutS, setLayoutS] = useState(generateLayout());
  
    const onLayoutChange = (layout: any) =&gt; {
      layoutState.onLayoutChange(layout);
    };
  
    return (
      &lt;&gt;
        &lt;SidebarMetrics /&gt;
        {console.log(&quot;Drawing&quot;)}
        &lt;GridLayout
          layout={layoutS as Layout[]}
          onLayoutChange={onLayoutChange}
          {...state}
          style={{ width: &quot;100%&quot; }}
        &gt;
          {generateDOM()}
        &lt;/GridLayout&gt;
      &lt;/&gt;
    );
  </code></pre>