title: useRef and useEffect not triggering on dependency change problem
body: <p>Hi I have a useEffect question/bug in my code. I would like to have a custom input field to upload an image. So I use useRef and pass it to the ProfileImageOption component. After the upload component the image's get url (avatarUrlPut) is updated and useEffect should call the getPhoto() function and re-render the component. But it is not happenning.</p>
  <p>I have found this blogpost related to my issue. But blogpost is not providing a solution idea around the bug. <a href="https://coder.earth/post/react-hooks-oops-part-3-an-effect-does-not-run-again-when-its-dependencies-change" rel="nofollow noreferrer">https://coder.earth/post/react-hooks-oops-part-3-an-effect-does-not-run-again-when-its-dependencies-change</a></p>
  <p>I have read from the official documentation that when useRef is used, useEffect will not be able to re-render the component because useRef doesn't notify React when it's current property changes. I suspect a similar issue here but I didn't understand it completely. Would someone help? Thank you.</p>
  <pre class="lang-js prettyprint-override"><code>
  function EmployeeHeader(props) {
    const {avatarUrlPut, avatarUrlPost} = props 
    const dispatch = useDispatch()
    const userID = useSelector((state) =&gt; state.auth.fetchUserSuccess.id)
  
    useEffect(() =&gt; {
    // After uploading the image avatarUrlPut is changed and it is on the dependency array of useEffect
      dispatch(getPhoto(avatarUrlPut)) 
        console.log(&quot;Am I called after an upload?&quot;) // No!
    }, [dispatch, avatarUrlPut])
  
    const [uploadedImage, setUploadedImage] = useState({})
  
    const uploadImage = useRef()
    const openCameraModal = useRef()
    return (
      &lt;div&gt;
        &lt;ColorizedRect width={'100%'} height={'175px'}&gt;
          &lt;Image
            source={avatarUrlPut}
            className={'profile_image'}
            spinnerwidth={'140px'}
            spinnerheight={'175px'}
          /&gt;
          &lt;ProfileImageOption
            onClick={() =&gt; uploadImage.current.click()}
            icon={'upload'}
            top={'80px'}
          &gt;&lt;/ProfileImageOption&gt;
          &lt;input
            id=&quot;uploadAvatar&quot;
            ref={uploadImage}
            type=&quot;file&quot;
            accept=&quot;.jpg,.jpeg,.png,&quot;
            style={{display: 'none'}}
            onChange={(e) =&gt;
              dispatch(uploadPhoto(e.target, avatarUrlPost, setUploadedImage, handleShow))
            }
          /&gt;
          &lt;a href={avatarUrlPut} download=&quot;Avatar.jpg&quot;&gt;
            &lt;ProfileImageOption icon={'download'} top={'125px'}&gt;&lt;/ProfileImageOption&gt;
          &lt;/a&gt;
        &lt;/ColorizedRect&gt;
      &lt;/div&gt;
    )
  }
  export default EmployeeHeader
  </code></pre>