title: re-render a functional component on prop change
body: <p>Child component accepts a prop and does calculations to show value. On first load, it does work but when parent does passes new value, nothing updates.</p>
  <p>Parent:</p>
  <pre><code> function Parent(){
         const [v, setV] = useState(0);
  
      const addNewValue = () =&gt;{
          setV(generateValue({type:'mv', gId: 3})); // generateValue is a function that returns an integer on each call
        }
  
     return (&lt;div&gt;
            &lt;Child value={v}/&gt;
            &lt;Button onClick={addNewValue}&gt;Calculate&lt;/Button&gt;
            
         &lt;/div&gt;)
  
    }
  </code></pre>
  <p>Child.js</p>
  <pre><code> function Child({value}){
         const [baseValue, setBaseValue] = useState(value);
  
  
      useEffect(()=&gt;{
        const calculate = calculate(baseValue);
        setBaseValue(calculate);
       },[baseValue]);
  
     return (&lt;div&gt;
            &lt;Text&gt;{baseValue}&lt;/Text&gt;
         &lt;/div&gt;)
  
    }
  </code></pre>