0

I am learning how to use Reactjs and I read the following post : https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data

When componentWillMount is used, it is written that The above code is problematic for both server rendering (where the external data won’t be used) and the upcoming async rendering mode (where the request might be initiated multiple times).

I do not understand :

  • How the request might be initiated multiple times because componentWillMount is used only one time.
  • Why componentDidMount solves this problems. For the server rendering, the external data won't be used also in the first render call.
Improve this question

2 Answers 2

Reset to default
1

According to the React docs, changing your component’s state in componentWillMount will not trigger a re-render. This means that if you make your AJAX call and set the response in your component state, it will not re-render, which means you won’t see your data in the DOM. (Remember that the component was initially created with an initial state which most likely didn’t have the data from your external data/AJAX call response)

You could argue that wouldn’t it be better to do my AJAX call to pull external data before the component mounts for the first time? It wont be better because you don’t know how much time it will take to do your AJAX call. Your AJAX request could take longer to get the data than the time it takes the component to mount and therefore your data does not show up on your DOM as the component has already rendered and there is no re-rendering happening. Your AJAX request could take longer for any reason - your user is on mobile and has slow internet, some issue with your server is making it slow to return responses, etc...

Best thing to do is make your AJAX call in componentDidMount and make your component handle empty data (probably display a loading spinner) until your AJAX request returns the data, sets it to the component state and triggers a re-render! :)

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

1 Comment

Thanks a lot. I understand now the second part of my question. In example I am writing, I need these data to render but if the connection is slow, I must display a loading spinner. And how, the request might be initiated multiple times : componentWillMount could be call many times ? (Rq : I use componentDidMount, it is only to understand lifecycle)
1

If you read further down they explain a bit more why componentWillMount is problematic.

The above code is problematic for both server rendering (where the external data won’t be used) and the upcoming async rendering mode (where the request might be initiated multiple times).

But these may be rendered moot as react is essentially deprecating that lifecycle function come react 17, and thus currently is renamed to UNSAFE_componentWillMount and not recommended for use, but instead use componentDidMount to make your async data fetches.

Why does componentDidMount fix this?

Because the server is pre-rendering the components/JSX, but you don't want the component to fetch its data until after it is actually mounted and running in a browser.

react component lifecycle docs

Improve this answer

2 Comments

Thanks for answer but this is what I do not understand. I also copy this sentence in my question. I also know that componentWillMount is deprecated and will be removed in ReactJS 17. I read some blogs about getDerivedStateFromProps.
It's a problem for server side rendering as the fetched data will never be used, so it's a useless call. The other part about async render means that they are saying that function could be called some number of times before the component is actually mounted and ready, but it can only be mounted once, so moving your async fetches there will work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.