title: React Component Does not Always Rerender After State Change
body: <p>I'm working of the internationalization of my app using <a href="https://github.com/yankouskia/localize-react" rel="nofollow noreferrer">https://github.com/yankouskia/localize-react</a>.
  I have the following App class.</p>
  <pre><code>export default class App extends Component {
  
    constructor(props) {
      super(props)
  
      this.state = {
        title: &quot;App title&quot;,
        language: &quot;EN&quot;
      };
  
      this.changeLanguage = this.changeLanguage.bind(this)
    }
  
    changeLanguage(language) {
      this.setState({
        language: language
      }, () =&gt; { console.log(this.state) })
    }
  
    render() {
      return (
        &lt;LocalizationProvider
          disableCache={IS_LOCALIZE_CACHE_DISABLED}
          locale={this.state.language}
          translations={TRANSLATIONS}
        &gt;
          &lt;Router&gt;
            &lt;section&gt;
              &lt;section className=&quot;header&quot;&gt;
                &lt;Header /&gt;
              &lt;/section&gt;
              &lt;section className=&quot;content&quot;&gt;
                &lt;Route exact path=&quot;/&quot; component={HomePage} /&gt;
                &lt;Language changeLanguage={this.changeLanguage} /&gt;
              &lt;/section&gt;
              &lt;section className=&quot;footer&quot;&gt;
                &lt;Footer /&gt;
              &lt;/section&gt;
            &lt;/section&gt;
          &lt;/Router&gt;
        &lt;/LocalizationProvider&gt;
      );
    }
  }
  
  </code></pre>
  <p>This is the language selector component:</p>
  <pre><code>export default class Language extends Component {
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div className=&quot;flag-container&quot;&gt;
                      &lt;img onClick={() =&gt; this.props.changeLanguage(&quot;RO&quot;)} src=&quot;/static/svg/ro.svg&quot; alt={'romana'} /&gt;
                      &lt;img onClick={() =&gt; this.props.changeLanguage(&quot;EN&quot;)} src=&quot;/static/svg/gb.svg&quot; alt={'english'} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  <p>Clicking the flag  in Language component should translate the text in the App child components. And it does. But there's a catch. Scenarios:</p>
  <ol>
  <li>Default is EN. Click once on RO -&gt; works. Click once on EN -&gt; works;</li>
  <li>Default is EN. Click once on EN -&gt; nothing happens (normal). Click once on RO -&gt; nothing changes in the page. Console log says state.language is RO. Click RO once again -&gt; works.</li>
  </ol>
  <p>So if any of the images is clicked twice(or more) in a row, it takes two clicks on the other one to actually view the translated page. Why doesn't it rerender properly from the first click?
  The state.language is always the proper one before the render method is called. Console sample:</p>
  <pre><code>RO - language before setState
  EN - language after setState
  app.js:42 render app
  header.js:12 render header
  app.js:36 {title: &quot;App title&quot;, language: &quot;EN&quot;} - console.log in setState() callback
  </code></pre>