React setting state with async/await

Question

So I am setting my state in my constructor with:

constructor(props: IProps) {
    super(props);
    const nav = NavService.getNav();
    const user = AuthService.getProfile();

    this.state = {
        activeNav: 0,
        nav: nav ? nav : [],
        showDropdown: false,
        showNavDropdown: false,
        user: user ? user : [],
    };
}

However, I am noticing some async issues so I want to make getNav() and getProfile() async and await them. Obviously I can't do this in the constructor because constructors cannot be async and therefore I cannot use await. Now I know I can just throw this into an async componentDidMount() but this causes a double render(). How can I optimize this?

Preload data before mounting a component at all (render null or a placeholder)? — Egor Stambakio
– Egor Stambakio, Commented Jul 5, 2018 at 19:03

Tholle · Accepted Answer · 2018-07-05 19:09:36Z

4

I think a re-render will be hard to avoid if your have to load some data asynchronously.

You could keep an additional state variable loading and just return null in the render method until your data has loaded.

Example

class App extends React.Component {
  state = {
    activeNav: 0,
    nav: [],
    showDropdown: false,
    showNavDropdown: false,
    user: [],
    loading: true
  };

  componentDidMount() {
    Promise.all(NavService.getNav(), AuthService.getProfile())
      .then(([nav, user]) => {
        this.setState({ nav, user, loading: false });
      })
      .catch(error => {
        this.setState({ loading: false });
      });
  }

  render() {
    const {
      activeNav,
      nav,
      showDropdown,
      showNavDropdown,
      user,
      loading
    } = this.state;

    if (loading) {
      return null;
    }

    // ...
  }
}

answered Jul 5, 2018 at 19:09

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

2 Comments

L. Norman Over a year ago

Yeah this looks like the best way to do it. Thanks!

L. Norman Over a year ago

What I ended up doing was have componentDidMount be an async function and then in render if (nav && user) return my component, otherwise return null. Works great.

Collectives™ on Stack Overflow

React setting state with async/await

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related