title: React custom hook useState initialization value not update through outside props
body: <p>I have a custom hook that has a locale state value by using <code>useState</code>, and I set the initial value from outside props, but when my props changes, my internal state value didn't get updated, in addition I am not quite understanding that, how many instance of custom hook in my component or application lifecycle where each time it's been triggered?</p>
  <p>Here is the code example:</p>
  <pre><code>// custom hook
  const useCustomHook = (initValue) =&gt; {
     const [isFetching, setIsFetching] = useState(initValue);
  
     useEffect(() =&gt; {
        console.log('initValue :&gt;&gt; ', initValue, ', isFetching :&gt;&gt;', isFetching);
     }, [initValue, isFetching);
  }
  // component
  const myComponent = (props) =&gt; {
     const [shouldTrigger, setShouldTrigger] = useState(false);
  
     useCustomHook(shouldTrigger);
  
     onButtonClick = () =&gt; {
       setShouldTrigger(true);
     }
  }
  </code></pre>
  <p>Here are the console logs that I get,</p>
  <pre><code>// when my component mouts
  'initValue :&gt;&gt; ', false, ', isFetching :&gt;&gt;', false
  // when button clicked
  'initValue :&gt;&gt; ', true, ', isFetching :&gt;&gt;', false
  </code></pre>
  <p>as you can see, as long as I set my <code>shouldTrigger</code> to true from the main component, my custom hook gets invoked, however, the local state value <code>isFetching</code> inside my custom hook value is still false, shouldn't it be true as it'll be assigned from outside props every time? and is my above two <code>useCustomHook</code> the same instance or different? If there are different instance being called, why the second instance not set initial value as &quot;true&quot;?</p>
  <p>Here is the code link
  <a href="https://stackblitz.com/edit/react-yma5my?file=index.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-yma5my?file=index.js</a></p>