title: React, redux, dispatch action during render
body: <p>I'm rendering different components on condition</p>
  
  <pre><code>  render() {
  
      switch(foo) {
      case 'a': return &lt;A/&gt;
      case 'b': return &lt;B/&gt;
      default: return &lt;C/&gt;
      }
    }
  </code></pre>
  
  <p>Now I want to track how many times each screen is visited, and do something like following</p>
  
  <pre><code>render() {
  
    switch(foo) {
    case 'a':
      this.props.dispatch(analytics.log({"screen": "A"}))
      return &lt;A/&gt;
    case 'b':
      this.props.dispatch(analytics.log({"screen": "B"}))
      return &lt;B/&gt;
    default:
      this.props.dispatch(analytics.log({"screen": "C"}))
  
      return &lt;C/&gt;
  
  }
  </code></pre>
  
  <p>I'm getting an error <code>cannot update during an existing state transition (such as within</code>render<code>). Render methods should be a pure function of props and state.</code></p>
  
  <p>I can't move the logging function call to <code>componentDidMount</code> because users move these screens like <code>tab</code> . </p>
  
  <p>In this, case <code>render</code> is the perfect place to put the log, but react suggest me not to. </p>
  
  <p>What can I do?</p>