React render component asynchronously, after data is fetched

Question

I need to render a component after data is fetched. If try to load data instantly, component gets rendered but no data is show.

class App extends React.Component {
  //typical construct

  getGames = () => {
    fetch(Url, {})
      .then(data => data.json())
      .then(data => {
        this.setState({ links: data });
      })
      .catch(e => console.log(e));
  };

  componentDidMount() {
    this.getGames();
  }

  render() {
    return (
      <div className="App">
        <Game gameId={this.state.links[0].id} /> //need to render this part
        after data is received.
      </div>
    );
  }
}

You need to rerender it actually, right?

Abin Thaha Azees
– Abin Thaha Azees

2018-07-27 11:28:33 +00:00
Commented Jul 27, 2018 at 11:28 — Abin Thaha Azees
– Abin Thaha Azees, Commented Jul 27, 2018 at 11:28

Tholle · Accepted Answer · 2018-07-27 11:28:47Z

4

You could keep an additional piece of state called e.g. isLoading, and render null until your network request has finished.

Example

class App extends React.Component {
  state = { links: [], isLoading: true };

  getGames = () => {
    fetch(Url, {})
      .then(data => data.json())
      .then(data => {
        this.setState({ links: data, isLoading: false });
      })
      .catch(e => console.log(e));
  };

  componentDidMount() {
    this.getGames();
  }

  render() {
    const { links, isLoading } = this.state;

    if (isLoading) {
      return null;
    }

    return (
      <div className="App">
        <Game gameId={links[0].id} />
      </div>
    );
  }
}

answered Jul 27, 2018 at 11:28

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

2 Comments

Efkiss Over a year ago

thank you for your help! as soon as I reach 15 reputation points I will upvote your answer :). Might be today.

Vitaliy Terziev Over a year ago

Would that still be a good option today if data is needed before render, also what if we do not need data state but rather ref instead, how do we trigger re render

RIYAJ KHAN · Accepted Answer · 2018-07-27 12:01:54Z

1

You can do like this using short circuit.

{
  this.state.links && <Game gameId={this.state.links[0].id} />
}

edited Jul 27, 2018 at 12:01

answered Jul 27, 2018 at 11:28

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

1 Comment

Efkiss Over a year ago

even though I've tried it earlier, your example does work. thank you!

Anish Kelkar · Accepted Answer · 2022-08-20 18:27:39Z

0

Can we use the pattern of "Render-as-you-fetch" to solve the problem. Using a flag to check whether loading is complete doesn't look like a clean solution..

answered Aug 20, 2022 at 18:27

Anish Kelkar

915 bronze badges

Collectives™ on Stack Overflow

React render component asynchronously, after data is fetched

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related