title: shouldComponentUpdate is not never called
body: <p>Please have a look at my code. I try to limit re-render of given stateless component but doing this found that shouldComponentUpdate is never called. I have removed wrapper from styledComponents (what was reported to be a case for someone before) but still is definitely not called.
  Besides all, one could write an article on catches of this functions</p>
  
  <pre><code>import React from 'react';
  import GoogleSearchForm from './RenderGoogleSearchForm.js';
  import ButtonWithMessage from './ButtonWithMessage.js';
  import styled from 'styled-components';
  
  export default class RenderTableOverHead extends React.Component{
  
    constructor(props) {
      super(props);
    }
  
    shouldComponentUpdate(nextProps, nextState) {
      console.log('shoulItdUpdate');
      return false;
    }
  
    render(){
      console.log('render overhead');
      const wrapstyle = 'd-flex align-items-center justify-content-center border-none'
  
    const Button = {
      // lots of defined buttons
    }
  
    return(
  
      &lt;div className = {wrapstyle}&gt; 
        {!this.props.isHiddenReturnButton &amp;&amp; &lt;Button.ReturnToPreliminarySearch /&gt;}
        {!this.props.isHiddenWelcomeButton &amp;&amp; &lt;Button.Welcome /&gt;}
        {!this.props.isHiddenFailureMsg &amp;&amp; &lt;Button.SearchFailure /&gt;}
        {!this.props.isHiddenResultsMsg &amp;&amp; &lt;Button.SearchResults /&gt; }
        {(this.props.isConnectionOK &gt;0||this.props.isConnectionOK===undefined) &amp;&amp; &lt;Button.ConnectionError /&gt; }
        {!this.props.isHiddenInputForm &amp;&amp; &lt;GoogleSearchForm  FetchBooks = {this.props.FetchBooks} /&gt; }
        {!this.props.isHiddenFilterToggleButton &amp;&amp; &lt;Button.FilterShowPrompt /&gt;}
    &lt;/div&gt;
  )}}
  </code></pre>
  
  <p>As requested - that is called by parent like this:</p>
  
  <pre><code>import RenderTableOverHead from './components/RenderTableOverHead.js';
  </code></pre>
  
  <p>below it is packed with its props to form new function</p>
  
  <pre><code>  const Overhead = ()=&gt;{return(  
  
        &lt;RenderTableOverHead 
  
        isHiddenInputForm={ this.state.isHiddenInputForm}
        isHiddenWelcomeButton={this.state.isHiddenWelcomeButton}
        ShowGoogleSearch={this.handleWelcomeButtonClick}
        //SubmitInputDataToParentState={this.fetchBooks}
        FetchBooks ={this.fetchBooks}
        isHiddenResultsMsg={this.state.isHiddenResultsMsg}
        isHiddenFailureMsg={this.state.isHiddenFailureMsg}
        toggleFilterVisibility={this.toggleFilterVisibility}
        numberOfResults ={catalog.TotalNumberOfBooks}
        numberOfPages =/*{_.last(TableWithPageNumbers)}*/{catalog.NumberOfPages}
        currentPageNumber ={catalog.CurrentPageNumber}
        //currentPage ={this.Page}//tu podmieniony numer strony jest kosztem powyższego
        isConnectionOK={this.state.connectionStatus}
        //errorStatus ={this.state.errorStatus}
        //errorMessage ={this.state.errorMessage}
        //handleError={this.handleError}
        isHiddenReturnButton={this.state.isHiddenReturnButton}
        isHiddenFilterToggleButton={this.state.isHiddenFilterToggleButton}
        /&gt;
  
  
  );}
  </code></pre>
  
  <p>and is returned  like that (here its named Overhead)</p>
  
  <pre><code>return(
  
          &lt;div className='container'&gt;
          &lt;Overhead /&gt;
          &lt;Pagination /&gt;
          {isDataLoaded &amp;&amp; 
             &lt;div className = {cardStyle}&gt;
             &lt;table className = {tableStyle}&gt;
                  &lt;thead className = {tableHeaderStyle}&gt;
                  &lt;Headline /&gt;     
                  {Filtration}            
                  &lt;/thead&gt;
                  &lt;TableBody /&gt;     
         &lt;/table&gt;
         &lt;/div&gt;};
         &lt;/div&gt;)
  </code></pre>