title: React function component not updating with new props
body: <p>I have <code>React</code> function component <code>Input</code> it's a simple <code>input</code> field it takes only one <code>prop</code> named <code>epoch</code>, the value of <code>epoch</code> in milliseconds. inside the component, I use <code>moment</code> js to format this time to a <code>HH:mm</code> (hour:min) format, also I'm using <code>useState</code> inside the <code>Input</code> component to set <code>input</code> value while user updates the input I needed to check with complex algorithms and need to append +/- with number.</p>
  
  <p><code>Input.jsx</code></p>
  
  <pre><code>import React, {useState, } from 'react'
  import moment from 'moment'
  
  function Input({epoch}){
    console.log(epoch)
    const translateValueToString = epochValue =&gt; {
      return moment(epochValue).format('HH:mm')
    }
    const [value, updateValue] = useState(translateValueToString(epoch))
    return &lt;input value={value} onChange={(e) =&gt; {
      // i need to update the value with some complex calculation and update it
      updateValue(`${e.target.value}+2`)
    }}/&gt;
  }
  
  export default Input
  </code></pre>
  
  <p>As you can see, I'm using the Internal state to update the value of the input, instead use directly use the prop, because I needed to join some string to the value while user types.</p>
  
  <p>From parent Component, I'm sending <code>epoch</code> value as prop aslo in paren component I have button to update <code>epoch</code> value with +1 minute for each click.</p>
  
  <p><code>App.jsx</code></p>
  
  <pre><code>import React, {useState} from "react";
  import "./styles.css";
  import Input from './Input'
  import moment from 'moment'
  
  export default function App() {
    const [epoch, updateEpoch] = useState(moment().valueOf())
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;Input epoch={epoch}/&gt;
        &lt;button onClick={() =&gt; {
          updateEpoch(epoch+60000)
        }}&gt;ADD 1 min&lt;/button&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I expect each click should update the input value with updated <code>epoch</code> prop value. But it wont happen. <code>useState</code> inside the Input won't fires.</p>
  
  <p><a href="https://codesandbox.io/s/vibrant-firefly-6ic78" rel="nofollow noreferrer">Working demo</a></p>
  
  <p><strong>Updated</strong></p>
  
  <p>I cant use <code>useEffect</code> inside Input function it triggers multiple, multiple rerender, because im using <code>redux-form</code>.</p>