title: Is dispatching Redux actions considered expensive?
body: <p>I've been using the React - Redux - Typescript stack for a while and I'm loving it so far. However, since I'm quite new to Redux, I've been wondering about this certain topic. <strong>Is dispatching Redux actions (and thunks) considered expensive operations and should be used sparingly, or should it be used as much as setState is used?</strong></p>
  
  <p>Let's say the Redux state has a single reducer that manages user information:</p>
  
  <pre><code>const initialState = {
    firstName: '',
    lastName: ''
  }
  </code></pre>
  
  <p>And to change these fields, let say we have actions like <code>setFirstName</code>, <code>setLastName</code>, etc... just for simplicity's sake.</p>
  
  <p>And let's say in the View I have an input element in <code>render()</code>:</p>
  
  <pre><code>&lt;input onChange={this.firstNameInputChangeListener} placeholder="First Name"/&gt;
  </code></pre>
  
  <p>Considering <code>setFirstName</code> has been mapped to the component:</p>
  
  <pre><code>export default connect(state =&gt; state, { setFirstName })(ThisComponent);
  </code></pre>
  
  <p>Is it optimal to dispatch an action every time there's a change in the input:</p>
  
  <pre><code>public firstNameInputChangeListener = (event) =&gt; {
    this.props.setFirstName(event.target.value);
  }
  </code></pre>
  
  <p>Or is it better to create local component state, bind the state to the Change Listener and only dispatch an action when the form is submitted:</p>
  
  <pre><code>public state = {
    firstName: this.props.firstName;
  }
  
  public firstNameInputChangeListener = (event) =&gt; {
    this.setState({ firstName: event.target.value });
  }
  
  public submitButtonListener = (event) =&gt; {
    this.props.setFirstName(this.state.firstName);
  }
  </code></pre>
  
  <p>What do you guys think?</p>