title: React useState Hook issue with controlled input component
body: <p>I've had a controlled class component within my app that I want to turn into a functional component that utilizes hooks. Before, the code worked fine by setting the <code>event.target.value</code> within the input and setting the state of <code>searchTerm</code> to be that current value. However, since refactoring with hooks, I've noticed an issue with the <code>searchTerm</code> state value being the letter before each <code>event.target.value</code>. For example, if I type "Joker" in the input bar, using <code>setSearchTerm(e.target.value)</code> I would get the searchTerm state as being "Joke" and not "Joker" until I cause another event by hitting a key. I'm not sure why this is happening because when I did this with a class component, setting <code>this.state.searchTerm</code> to <code>e.target.value</code> would achieve the desired goal. Before if I typed "Joker" into the input field, the <code>searchTerm</code> state would actually be "Joker". Any help with this would be greatly appreciated. Thank you!</p>
  
  <pre><code>import React, { useState, useRef } from 'react';
  import './SearchBar.styles.scss';
  import FontAwesome from 'react-fontawesome';
  import {connect} from 'react-redux';
  import {searchMovies} from '../../redux/redux-home/home.actions';
  
  const SearchBar = ({ searchMovies }) =&gt; {
      const [searchTerm, setSearchTerm] = useState('');
      // constructor(){
      //     super();
      //     this.state={
      //         searchTerm: ''
      //     }
      // }
  
      const timeOut = useRef(null);
  
      const doSearch = e =&gt; {
          clearTimeout(timeOut.current);
          setSearchTerm(e.target.value);
          // this.setState({[e.target.name]: e.target.value});
  
          timeOut.current = setTimeout(() =&gt; {
              searchMovies(searchTerm);
          }, 500);
      }
      return(
          &lt;div className="searchbar"&gt;
              &lt;div className="searchbar-content"&gt;
                  &lt;FontAwesome className="fa-search" name="search" size="2x"/&gt;
                  &lt;input type="text" placeholder="Movie" autoComplete="off" onChange={doSearch} value={searchTerm}/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  const mapDispatchToProps = dispatch =&gt; ({
      searchMovies: search =&gt; dispatch(searchMovies(search))
  });
  
  export default connect(null, mapDispatchToProps)(SearchBar);
  </code></pre>
  
  <p><code>Console.log(e.target.value);</code> before and after the <code>setSearchTerm</code> line both return the correct value; however, <code>console.log(searchTerm);</code> before and after the <code>setSearchTerm</code> line both return the incorrect value that is one event trigger behind. </p>