title: update child component after an async call in parent
body: <p>I am trying to update a child component from parent. The parent component initially makes an async call to get value and the value was to be reflected in child but refused so far. It only shows the initial value of 0 set in the Parent.</p>
  <p>ChildComponent.js</p>
  <pre><code>const ChildComponent = ({
    value
  }) =&gt; {
    return (
        &lt;View&gt;
          &lt;Text&gt;{value}&lt;/Text&gt;
        &lt;/View&gt;
    );
  };
  
  
  export default ChildComponent;
  </code></pre>
  <p>Parent.js</p>
  <pre><code>const Parent = () =&gt; {
    const [value, updateValue] = useState(0);
  
    useEffect(() =&gt; {
      async function getValue() {
        const { totalBorrowed } = await Service.getBorrowDetails();
         console.log(totalBorrowed); //resolves well
        updateValue(totalBorrowed);
        console.log(value); //shows the correct value
      }
  
      getValue(); // tried .then().catch()
    }, [value]);
  
    return (
          &lt;View&gt;
            &lt;ChildComponent
              value={value}
            /&gt;
          &lt;/View&gt;
    );
  };
  export default Parent;
  </code></pre>
  <p>even though the value has been updated, ChildComponent shows 0 only, the initial value.</p>