javascript - Fetching data in constructor

Question

Is a good practice to fetch data in javascript class constructor()?

E.g. In react class constructor(), every tutorial which I find fetch data in componendDidMount(), but no one explein why We can't do it in constructor().

Question concerns javascript classes at all, not only react.

Answer 1

Constructor is called before the component is mounted (as stated here in #constructor doc: https://reactjs.org/docs/react-component.html).

To answer your question, the explanation lies in the lifecycle of a react component and the need to redraw when the state changes. By doing async calls in constructor, you may trigger setState before your component is mounted.

Doing async calls in constructor will mess with the re-render and your component will sometimes not re-render if you call setState in the constructor.

From doc:

You should not call setState() in the constructor(). Instead, if your component needs to use local state, assign the initial state to this.state directly in the constructor:

Avoid introducing any side-effects or subscriptions in the constructor. For those use cases, use componentDidMount() instead.