Issue 1:
This is a bug. I've spent a lot of time trying to localize the bug and have ended with the following minimal example:

import {useState} from React;

function App() {
const [imageURL, setImageURL] = useState('https://picsum.photos/1600/1200');
const [meaninglessValue, setMeaninglessValue] = useState(0);

return (
<div>
<p>
<button onClick={() => setImageURL('https://picsum.photos/1600/1200')}>Set picture 1</button>
<button onClick={() => setImageURL('https://picsum.photos/1500/1300')}>Set picture 2</button>
<button onClick={() => setMeaninglessValue(meaninglessValue + 1)}>Change another image prop</button>
</p>
<DelayedImage src={imageURL} unused={meaninglessValue} />
</div>
);
}

function DelayedImage({src}) {
const [previousSrc, setPreviousSrc] = useState();
const [isLoaded, setIsLoaded] = useState(false);

console.log('Image is rendered with', {previousSrc, src, isLoaded});

if (src !== previousSrc) {
setPreviousSrc(src);
setIsLoaded(false);
console.log('Image unloaded');
}

const handleLoad = () => {
setIsLoaded(true);
console.log('Image loaded');
};

return (
<img
src={src}
alt=""
onLoad={handleLoad}
onError={handleLoad}
style={{
maxWidth: '100%',
maxHeight: '80vh',
opacity: isLoaded ? 1 : 0.2
}}
/>
);
}

ReactDOM.render(<App />, document.getElementById('root'));

Live demo

Steps to reproduce:

Open the demo

Wait until the image is loaded (becomes opaque)

Click the "Set picture 2" button

Wait a bit (while the image is loading)

Expected result:

The second image gets opaque after a few seconds (the DelayedImage component gets rerendered with the new state).

Actual result:

The image stays translucent despite the new state that should make it opaque.

I reproduced the bug with React 16.8.2 in Safari 12.0.3 and Chrome 72.0.3626.109 on macOS 10.14.3 (didn't try other versions).

More details about the example

The DelayedImage component is an image that gets translucent while being loaded. The information about whether the image is loading or loaded is stored in a state using the useState hook. The other state hook is used to check whether the image URL has changed (like in the FAQ example).

When the component is rendered for the first time, it works as expected: it is translucent while the image is loading and opaque after the image is loaded. When the src prop is changed (by clicking the "Set picture 2" button), the image gets translucent but doesn't get opaque when it's loaded.

According to the console messages, the correct value (isLoaded === true) is set to the state but React doesn't rerenders the component. React rerenders the component with the correct state when any other DelayedImage props is changed (by clicking the last button or changing a prop using Redux Dev Tools).

Issue 2:
Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When updating the state from useState doesn't actually update the component. In this case it is being updated on an event handler. I used console.log to verify that it is being called yet no update in the component is being dispatched. It's like React doesn't register that it wants to update the state.

Might want to throw out that I'm new with this React Hooks and it could be something that I'm missing.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React.

I've setup a simple example showcasing my issue, I also included an implementation with the old class syntax and when doing it with classes, it works fine. Here is the link to the CodeSandbox

This example is taken from my project, I'm fading out and translating upwards so I want to keep the text until the animation is done.

What is the expected behavior?

The component should update with the new registered state when trying to update state in a event handler.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React v16.8

React DOM v16.8