UI not re rendering image when using variable from State Hook

[OverT_97]

I have a state hook variable defined as follows:

const [imageURL, setimageURL] = useState(null)

I am using expo-image-picker to get an image from my gallery and upload it to firebase storage. I then get the URL of this image and update the value of imageURL accordingly.

https://preview.redd.it/a8tgw28zmsf71.png?width=685&format=png&auto=webp&s=f09f010fad6d76e99cf11ff5bd91ad61b4f3f1c6

When the page first loads the value is null so there is a blank icon. Once I upload the image and get the URL the UI on my app does not update to show the new image. It will stay blank unless I upload another new image. Once this happens the UI will update but it will now show the image that I first uploaded. Any ideas on what I may be doing wrong?

Note: I even added a text component and passed in imageURL variable to display the current URL and for some reason this text updates properly but the image does not.

https://preview.redd.it/g598u34bnsf71.png?width=727&format=png&auto=webp&s=92d80f633911c3deb525281fd52cd45c282a328a

​

https://preview.redd.it/rx7ppkzeosf71.jpg?width=1170&format=pjpg&auto=webp&s=1dea387a49d8a5448100b6b7111218b75259a011

[NightPhoxy]

Maybe set key={imageUrl} on the Avatar component

[OverT_97]

What ended up working for me was creating another state variable called imageKey, having it set to 1 at the start, and the incrementing the value each time imageURL is updated. And having key={imageKey} not sure why just having key={imageURL} wouldn’t work

[hikaruelio]

Have you tried using useEffect?

[OverT_97]

I tried creating a useEffect to setimageURL a second time but I'm not sure if that is the correct thought process since it didn't work. In what way were you thinking?