Question

99

How to use forceUpdate() correctly?

rated 0 times [ 105] [ 6] / answers: 1 / hits: 21047 / 8 Years ago, tue, january 10, 2017, 12:00:00

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=http://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

Only authorized users can answer the question. Please sign in first, or register a free account.

kennedi

Add To Favorites

Follow

Total Points: 702

Total Questions: 109

Total Answers: 111

Location: Vietnam

Member since Sun, Oct 18, 2020

4 Years ago

answered 8 Years ago sandra · Accepted Answer

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=http://play.grafana.org/dashboard/db/elasticsearch-metrics width=1900px height=700px/>

        ) : null;

    }

});



ReactDOM.render((

    <div style={{height:'100%'}}>

        <Graph />

    </div>

), document.getElementById('root'));