React + AJAX component over-rendering

Question

To fill the content of React component I use AJAX request in the body of the method componentWillMount, where I change this.state as a result of the execution of the request. The trouble is that the render method runs as before the request completion, as after the this.state change by setState. Moreover, if such component renders one, which also is used AJAX, the number of render calls grows as a power of two.

How to make the component is rendered only after obtaining the necessary data?

var News = React.createClass({
    getInitialState: function () {
        return {
            news: [],
            page: 1
        };
    },

    componentWillMount: function () {
        let xmlhttp = getXmlHttp();
        xmlhttp.open("POST", "server/news.php", true);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.onreadystatechange=() => {
            if (xmlhttp.readyState != 4) return;
            clearTimeout(timeout);
            if (xmlhttp.status == 200) {
                this.setState({
                    news: eval(xmlhttp.responseText.toString())
                });
            } else {
                handleError(xmlhttp.statusText);
            }
        };
        xmlhttp.send('page=' + this.state.page);
        var timeout = setTimeout( function(){ xmlhttp.abort(); handleError("Request time over") }, 10000);
    },

    render: function () {
        let itemList = this.state.news.map(function(item, iterator){
            return (
                <NewsItem
                    niTitle={item[0]}
                    niText={item[1]}
                    niDate={item[2]}
                    niImg={item[3]}
                    key={"ni " + iterator}
                />
            );
        });
        return (
            <div>
                {itemList}
                <PageChanger page={this.state.page}/>
            </div>
        );
    }
});

@svnav You might consider passing props from <News> to <PageChanger>, and making batch API calls from <News>, or a wrapping controller component. — A. Vidor
– A. Vidor, Commented Sep 21, 2016 at 21:37

A. Vidor · Accepted Answer · 2016-09-21 21:33:10Z

3

How to make the component is rendered only after obtaining the necessary data?

If your render function returns false, nothing will be rendered. (Source: the docs.)

Therefore, you can set a flag in your initial state:

getInitialState: function () {
    return { page: 1, shouldRender: false };
}

Then, in render, you can check that flag:

if (! this.state.shouldRender) return false;

In the callback passed to the XHR, you can update the flag:

this.setState({
  shouldRender: true,
  news: eval(xmlhttp.responseText.toString()),
});

answered Sep 21, 2016 at 21:33

A. Vidor

2,5501 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

svnvav Over a year ago

Thank you. I' ve forgot this from the documentation.

presswanders · Accepted Answer · 2016-09-21 22:06:03Z

-1

First, abstract your network call to a helper and import into the component as needed.

Second, use componentDidMount not componentWillMount to avoid multiple renders.

for example:

import networkCall from ../helpers/networkCall 
    componentDidMount() {
        this.setState({
            emails: networkCall.news,
            emailCache: networkCall.page
        });
    },

answered Sep 21, 2016 at 22:06

presswanders

6557 silver badges8 bronze badges

Collectives™ on Stack Overflow

React + AJAX component over-rendering

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related