title: React Hook updates parent state a step behind
body: <p>When a functional component updates a prop, the parent's state does not get the new value until another change is made to the picker element. </p>
  
  <p>It goes as such:</p>
  
  <p>Picker loads with date A. </p>
  
  <p>=> I pick date B. </p>
  
  <p>=> Picker renders date B but parent state shows selectedDate of date A.</p>
  
  <p>=> I pick date C.</p>
  
  <p>=> Picker renders date C but parent state shows selectedDate of date B.</p>
  
  <p><strong>Parent (Stateful Component):</strong></p>
  
  <pre><code>constructor(props) {
    super(props);
          this.state = { selectedDate: new Date() }   // initializes state
      }
  
  handleDateChange = date =&gt; {
          this.setState({ selectedDate: date })   // receives date and updates state
      };
  
  componentDidUpdate() {
          console.log('component did update :', this.state);   // one step behind child state
      };
  
  render() {
    return(
      &lt;DatePicker
          selectedDate={this.state.selectedDate}
          handleDateChange={this.handleDateChange}/&gt;
  )}
  </code></pre>
  
  <p><strong>Child (Function Component):</strong></p>
  
  <pre><code>export default function DatePicker(props) {
    const [selectedDate, setSelectedDate] = React.useState(props.selectedDate);
  
    const handleDateChange = date =&gt; {
          console.log(date)   // shows the correct date
  
          setSelectedDate(date);                 // updates child state
          props.handleDateChange(selectedDate);  // updates parent state
      };
  
    return (
          &lt;KeyboardDatePicker
            value={selectedDate}
            onChange={handleDateChange}/&gt;
    )}
  </code></pre>