How to make rehydrate update slightly changed style props

Question

Let's say I have a very simple app with the following render method.

render(){
    return (<div style={{height:window.innerHeight}}/>);
}

Resulting in the following DOM:

<div data-reactroot="">
    <div style="height:938px">
    </div>
</div>

Now when I try to rehydrate the DOM I get a warning saying that style prop does not match but otherwise everyhing still works allright, except for the fact that the height of the div does not get updated to what it should be.

What would be the best way to either fix the warning or ignore it (as everything else work) and make react update the DOM element.

Note that: - I think this worked fine w. React 15.x. Using 16.0.0 now; - In this toy example I could obviously just use height:"100%" but in the real life case I do not have this luxury and have to calculate the dimensions in a way that depends ultimately on viewport size.

Answer 1

Did a McGyver fix here, reading the console for those warnings and then if I get those:

setTimeout(function(){
                ReactDOM.unmountComponentAtNode(RoboReact.rootParent);
                ReactDOM.render(RoboReact.rootElement,RoboReact.rootParent);
        },100);

(doesn't seem to work w/o the setTimeout for some reason)