title: Semantic UI React side bar render pusher only on visibility change (redux/rematch)
body: <p>I am using react and semantic. I am using the <a href="https://react.semantic-ui.com/modules/sidebar/#examples-multiple" rel="nofollow noreferrer">multiple sidebar example</a>. The idea is that the left hand sidebar offers up some menu options, and then the right hand sidebar is the sub menu based on which option from the left menu is chosen. When a sub menu item is selected, a component is added to the <code>Sidebar.Pusher</code>, i.e displayed on the page.
  It all works except re-rendering the content of the <code>Sidebar.Pusher</code>. This apparently only updates when the left hand side bar's visibility changes. I am using redux/rematch to handle state, and can see that the state that holds the content of the <code>Sidebar.Pusher</code> is being updated, but `render() is only being called when visibility changes of the sidebar.</p>
  <p>The content of <code>Sidebar.Pusher</code> is an array, and I even tried displaying on the page the length of the array, which is being updated (pushed into) each time an item on the right hand sidebar is clicked. However this doesn't cause a render() to be fired, its literally when the left hand sidebar visibility changes.</p>
  <p>Just to note, I did see <a href="https://stackoverflow.com/questions/51028558/semantic-ui-sidebar-pushable-wont-update-page-content">this issue</a>, however its from last year, and the answer wasn't enough for me to be able to fix the issue. Help would be appreciated.</p>
  <p>Structure:</p>
  <p><code>Index.js</code> renders <code>App.js</code>, <code>App.js</code> renders <code>Menu.js</code> (which is a semantic set of <a href="https://semantic-ui.com/modules/tab.html" rel="nofollow noreferrer">tabs</a>). One of the menu options is <code>Sidebar.js</code> which renders:</p>
  <pre><code>    &lt;Sidebar.Pushable as={Segment}&gt;
        &lt;Sidebar
          as={Menu}
          animation=&quot;overlay&quot;
          direction=&quot;right&quot;
          inverted
          vertical
          visible={secondaryVisibility}
          width=&quot;wide&quot;
        &gt;
          {focusedList.map((el, i) =&gt; {
            return (
              &lt;Menu.Item key={i} as=&quot;a&quot; onClick={() =&gt; this.addSegment(el)}&gt;
                &lt;Article el={el} /&gt;
              &lt;/Menu.Item&gt;
            )
          })}
        &lt;/Sidebar&gt;
        &lt;Sidebar
          as={Menu}
          animation=&quot;overlay&quot;
          icon=&quot;labeled&quot;
          inverted
          // onHide={this.handleSidebarHide}
          vertical
          visible={primaryVisibility}
          width=&quot;wide&quot;
        &gt;
          &lt;Menu.Item
            onClick={() =&gt; this.changeTab(menuItem)}
            as=&quot;a&quot;
            name=&quot;menuItem&quot;
            header
          &gt;
            Menu Item
          &lt;/Menu.Item&gt;
  
        &lt;/Sidebar&gt;
        &lt;Sidebar.Pusher style={{ minHeight: &quot;600px&quot; }}&gt;
          &lt;Segment basic&gt;
            {segments.map((el, i) =&gt; {
              console.log(`el ${el}`)
              return &lt;Content key={i} segment={el} /&gt;
            })}
          &lt;/Segment&gt;
        &lt;/Sidebar.Pusher&gt;
  </code></pre>
  <p>and all state (<code>secondaryVisibility</code> etc) is stored in rematch</p>
  <p>Thanks</p>