I have put a console.log in the render() function to help visualize the state.

Here my sandbox: 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,

thanks