Reactjs async rendering of components

Question

I want to render my component after my ajax request is done.

Below you can see my code

var CategoriesSetup = React.createClass({

    render: function(){
        var rows = [];
        $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) {
            $.each(data, function(index, element){
                rows.push(<OptionRow obj={element} />);
            });
           return (<Input type='select'>{rows}</Input>)

        })

    }
});

But i get the error below because i am returning render inside the done method of my ajax request.

Uncaught Error: Invariant Violation: CategoriesSetup.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

Is there a way to wait for my ajax request to end before start rendering?

Also, a small nitpick but having a data retrieval in a render() routine is not really a great idea. Keep render() to rendering and abstract out the rest. Also, you may only want to get that data once, not every time the component is rendered. — Phil Cooper
– Phil Cooper, Commented Sep 9, 2015 at 16:52

dcodesmith · Accepted Answer · 2015-08-06 15:26:40Z

138

There are two ways to handle this, and which you choose depends on which component should own the data and the loading state.

Move the Ajax request into the parent and conditionally render the component:

var Parent = React.createClass({
  getInitialState: function() {
    return { data: null };
  },

  componentDidMount: function() {
    $.get('http://foobar.io/api/v1/listings/categories/').done(function(data) {
      this.setState({data: data});
    }.bind(this));
  },

  render: function() {
    if (this.state.data) {
      return <CategoriesSetup data={this.state.data} />;
    }

    return <div>Loading...</div>;
  }
});

Keep the Ajax request in the component and render something else conditionally while it's loading:

var CategoriesSetup = React.createClass({
  getInitialState: function() {
    return { data: null };
  },

  componentDidMount: function() {
    $.get('http://foobar.io/api/v1/listings/categories/').done(function(data) {
      this.setState({data: data});
    }.bind(this));
  },

  render: function() {
    if (this.state.data) {
      return <Input type="select">{this.state.data.map(this.renderRow)}</Input>;
    }

    return <div>Loading...</div>;
  },

  renderRow: function(row) {
    return <OptionRow obj={row} />;
  }
});

edited Aug 6, 2015 at 15:26

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

answered Nov 28, 2014 at 16:28

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

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

11 Comments

Dan Over a year ago

I have stumbled across this answer in 2017, do these the two best solutions still remain the best to use?

Michelle Tilley Over a year ago

@Dan React renders UI based on props and state, so the core concept will remain the same — do the Ajax request, set some state, and re-render something. However, patterns like higher order components have become more popular, demonstrating how one might abstract away the complexities.

Timo Ernst Over a year ago

if (this.state.data) should be if (this.state && this.state.data) because sometimes state can be null.

Michelle Tilley Over a year ago

@Timo Hm, in what case would this.state be null?

Louis Over a year ago

@Timo initialize the state in the constructor

|

Roman · Accepted Answer · 2018-04-19 00:52:51Z

The basic example of async rendering of components is below:

import React                from 'react';
import ReactDOM             from 'react-dom';        
import PropTypes            from 'prop-types';

export default class YourComponent extends React.PureComponent {
    constructor(props){
        super(props);
        this.state = {
            data: null
        }       
    }

    componentDidMount(){
        const data = {
                optPost: 'userToStat01',
                message: 'We make a research of fetch'
            };
        const endpoint = 'http://example.com/api/phpGetPost.php';       
        const setState = this.setState.bind(this);      
        fetch(endpoint, {
            method: 'POST',
            body: JSON.stringify(data)
        })
        .then((resp) => resp.json())
        .then(function(response) {
            setState({data: response.message});
        });
    }

    render(){
        return (<div>
            {this.state.data === null ? 
                <div>Loading</div>
            :
                <div>{this.state.data}</div>
            }
        </div>);
    }
}

Rudi Jansen van Vuuren · Accepted Answer · 2021-02-03 07:54:41Z

Async state management (Playground)

The following solution allows for async state management and can be used for HTTP related requirements if implemented correctly.

Requirements

Only re-render elements consuming the observable.
Automatically subscribe and unsubscribe from the observable.
Support multiple and joint observables.
Provide a loading state
Simple and easy implementation

Expected behaviour

return (
    <Async select={[names$]}>
        {result => <div>{result}</div>}
    </Async>
);

The provided example above will subscribe to the observable names$. The content/children of the Async component will re-render when next is fired on the observable, not causing the current component to re-render.

Async Component

export type AsyncProps<T extends any[]> = { select: { [K in keyof T]: Observable<T[K]> }, children: (result?: any[]) => JSX.Element };
export type AsyncState = { result?: any[] };

export default class Async<T extends any[]> extends Component<AsyncProps<T>, AsyncState> {

    private subscription!: Subscription;

    constructor(props: AsyncProps<T>) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        this.subscription = combineLatest(this.props.select)
            .subscribe(result => this.setState({ result: result as T }))
    }

    componentWillUnmount() {
        this.subscription.unsubscribe();
    }

    render() {
        return (
            <Fragment>
                {this.props.children(this.state.result)}
            </Fragment>
        );
    }

}

Collectives™ on Stack Overflow

Reactjs async rendering of components

3 Answers 3

11 Comments

Comments

Async state management (Playground)

Requirements

Expected behaviour

Async Component

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Async state management (Playground)

Requirements

Expected behaviour

Async Component

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related