react: An update to the state from `useState` is not registered in event handler `onTransitionEnd`

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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 16 (3 by maintainers)

Most upvoted comments

@ioss Very interesting. I agree your code strongly points at this being a bug.

Meanwhile, I tried finding a minimal example of this problem and ended up with this: https://codesandbox.io/s/7mxz7v8x0

hreinhardt on Feb 11, 2019

Apologies, I’ve updated the example as well to make it easy to see the problem (hopefully)

When the page is loaded there is no message so the No message text is displayed. When clicking on the button the message becomes My message. When clicking again then the text should become No message after it has transitioned but it doesn’t.

The console can also be checked, the actual is after click toggle message twice and waiting for the transition to end:

Console was cleared
Updated Object {currentMsg: null, stagedMsg: null}
Updated Object {currentMsg: "My message", stagedMsg: "My message"}
Updated Object {currentMsg: "My message", stagedMsg: null}
handleTransitionEnd Object {currentMsg: "My message", stagedMsg: null}

expected is:

Console was cleared
Updated Object {currentMsg: null, stagedMsg: null}
Updated Object {currentMsg: "My message", stagedMsg: "My message"}
Updated Object {currentMsg: "My message", stagedMsg: null}
handleTransitionEnd Object {currentMsg: "My message", stagedMsg: null}
Updated Object {currentMsg: null, stagedMsg: null}

The reason why I’m expecting another update is because I’m updating the state in the transition handler.

DennisSkoko on Feb 10, 2019