ComponentDidMount strangeness

[RassaLibre]

Hi,
there seems to be something strange with... well, I do not even know with what but I have been using this stack for some time and it has never been a problem. I created a new store CanvasStore and I have a component Entity which renders this:

<div className={entityStyle.entity}>
    <h1>{this.props.name}</h1>
</div>

The className is imported like it can be seen in the other components from you. In this component I have componentDidMount function, which uses AppActions to notify CanvasStore about the dimensions of the mounted entity so it looks like this:

let width = React.findDOMNode(this).clientWidth;
let height = React.findDOMNode(this).clientHeight;
AppActions.entityMounted(this.props.id, width, height);

And I have two problems:

1. width and height are equal to values when the div has no styling (width is equal to 100% of the parent, screen in this case, and height is equal to the font size of the text in h1)
2. When I save the dimensions and call emitChange() in the CanvasStore, nothing happens. No callback is triggered so the UI is out of sync with the global state

I figured out that the solution for this is to surround the content of componentDidMount in setTimeout() function like this.

setTimeout( ()=>{
    let width = React.findDOMNode(this).clientWidth;
    let height = React.findDOMNode(this).clientHeight;
    AppActions.entityMounted(this.props.id, width, height);
});

Then everything starts to work, I get the correct dimensions of the Entity and the App component loads the new global state because emitChange() was called in the CanvasStore. My question is- Why do I have to have the setTimeout function there? Is this a bug or it is just me? Thanks :-)

[nathanvale]

This is for me too. I would love to know why. You would kind of expect it to be the correct width and height seeing the "ComponentDidMount"?
I used your timeout solution too.

[shubhamgoyal]

Same here. Would love to know why as well :)

[bradbyte]

For what it's worth I was able to get this working by adding the findDOMNode inside of window.requestAnimationFrame.