How to use forceUpdate() correctly?

I’m trying to periodically reload an iframe but i’m using React so i can’t manipulate the DOM directly. It seems like my best option is to use forceUpdate() because the url isn’t changing so i can’t use a state change to update it (See previous post here What’s the best way to periodically reload an iframe with React?).
However when i try doing a forceUpdate() it doesn’t re-render my component. Any ideas as to why?

var Graph = React.createClass({
componentDidMount: function() {
    setInterval(function(){
        this.forceUpdate();
    }.bind(this), 5000);
},
render() {
    return (
        <iframe src="https://play.grafana.org/dashboard/db/elasticsearch-metrics" width="1900px" height="700px"/>
    )
}

});

See the codepen here: http://codepen.io/anon/pen/ggPGPQ

**I know grafana can be set to auto update, i’m just using this as an example iframe.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

class App extends React.Component {
    state = {
        name: 'request',
        phones: ['nokia', 'sonya', 'ericsson']
    }

     Rerender = () => {
        this.forceUpdate()
     }

    render() {
        const rd= Math.random();
        return ( <div> REACT APP
            { this.state.phones.map(item => <p>{item} {rd}</p>) }

            <input type="button" value="Click" onClick={this.Rerender}/>
        </div>)
    }
}
ReactDom.render(
        <App />,
    document.getElementById('root')
);

Method 2

React is intelligent to know that that element hasn’t changed so it doesn’t unmount it on rerender. There are many ways you can remove the element and add it back but here is one contrived way built on your example (renders twice on each interval to remove and add back the iframe):

var Graph = React.createClass({
    getInitialState: function() {
      return {count: 0};
    },
    componentDidMount: function() {
        setInterval(function(){
            this.setState({count: this.state.count + 1});
            this.setState({count: this.state.count + 1});
        }.bind(this), 5000);
    },
    render() {
        return this.state.count % 2 === 0 ? (
          <iframe src="https://play.grafana.org/dashboard/db/elasticsearch-metrics" width="1900px" height="700px"/>
        ) : null;
    }
});

ReactDOM.render((
    <div style={{height:'100%'}}>
        <Graph />
    </div>
), document.getElementById('root'));


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x