I have put a console.log in the render() function to help visualize the state.
Here my sandbox: https://codesandbox.io/s/77ymmnpr1
What I'm doing:
In my code I'm creating three labels that are expandable, then I put some labelComponent to overlaying them. The overlay got a button to come back on the menu. The problem is that when I then expand an another labelComponent, there is a slight lag with the old state then the new state displayed. Hence the console.log I'm providing to you.
That put something like following in the console:
PATHNAME: newState PATHNAME: oldState PATHNAME: newState PATHNAME: oldState
edit: other possible weird behavior is my component to display the old state on an incremental lagging. Seems then that the state accumulate old state then display it in a kind of messed order, or kind of thing like that.
In which case my console returns on second rendering:
stateOne current state
then, on third rendering:
stateOne stateTwo currentState
on fourth rendering:
stateOne stateTwo stateThree currentState
etc. the firsts state are the olds state then come the currentState
What that mean? I call this.setState() only to put in it the new state, so why it come back to the old state?
Any hint would be great,