React: Use async/await in getDerivedStateFromProps

[zach-luman]

Hi
I'm in need of aysnc/await in getDerivedStateFromProps but it's not working as expected.

static getDerivedStateFromProps(props, state) {
    const response = [];
    console.log('break 1');
    [1, 2].map(async path => {
        console.log('break 2');
        const data = await FileGetData.get(path);
        response.push(data);
    });
    console.log('break 3');
    return { fileData: response };
}

Expected

break 1
break 2
break 2
break 3

Results:

break3
break2
break2

Can't we use async/await in getDerivedStateFromProps?

Thanks,

[NE-SmallTown]

Your expected is how React outputs today. See https://jsfiddle.net/heaven_xz/Luktwrdm/1155/ , to be honest, this is not about React, it's just a common javascript function call, so how javascript works, how React works.

And on the other hand, you have 2 mistakes here:

1. Async operations in getDerivedStateFromProps is useless, even you can do that in cWRP(You can call this.setState) but that's still a bad idea and that's one of the reasons React deprecate it.

2. You should not do side effect in getDerivedStateFromProps, you can read the RFC or doc for more details.

[gaearon]

Don't use getDerivedStateFromProps for data fetching. It's not meant for this.

You want to put this logic into componentDidUpdate.

[ericmarcos]

@gaearon componentDidUpdate is not called for the initial render. I'm trying to render my component server-side, using ReactDOMServer.renderToString(element) but it's not clear to me where should I load the initial data. I'd like to have something like next.js getInitialProps where you can do:

static async getInitialProps() {
    const res = await fetch('https://api.github.com/repos/zeit/next.js')
    const statusCode = res.statusCode > 200 ? res.statusCode : false
    const json = await res.json()
    return { statusCode, stars: json.stargazers_count }
}

Thanks,

[gaearon]

You can't load initial data asynchronously in the current SSR implementation. Think about it: renderToString() itself is synchronous. So this simply doesn't make sense.

There are unofficial workarounds like rendering twice. We don't recommend that but I understand if you want to do it. In this case you can use the constructor.

In the future, it will be possible to wait for data to load using the server renderer. We're tracking this in https://github.com/facebook/react/issues/1739. I expect that we might have something for this next year.

[ericmarcos]

@gaearon gotcha, thank you.

[NE-SmallTown]

@gaearon Next year? So the SSR suspense won't be released with the client Suspense?

[gaearon]

Client implementation is more or less ready. The cache provider still needs work but the core implementation is already in production at FB.

We're just starting work on the SSR part. So it might come later.

[NE-SmallTown]

Oh, gotcha, I will notice the issues/prs, hope I could do any helps :)

[TomaIvanovTomov]

Don't use getDerivedStateFromProps for data fetching. It's not meant for this.

You want to put this logic into componentDidUpdate.

Yes, but if I update the state in the componentDidUpdate infinite loop occurs. What is the alternative of that ?

[g-lsh]

Don't use getDerivedStateFromProps for data fetching. It's not meant for this.
You want to put this logic into componentDidUpdate.

Yes, but if I update the state in the componentDidUpdate infinite loop occurs. What is the alternative of that ?

Are you referring to the behaviour that is answered in the doc https://reactjs.org/docs/react-component.html#componentdidupdate :

You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you’ll cause an infinite loop. It would also cause an extra re-rendering which, while not visible to the user, can affect the component performance.

In which case, there is your answer.