Search code examples
javascriptreactjsfrontendreact-lifecycle

Why is it prohibited to fetch data from API in constructor of a React Component

I've researched this question and it appears that fetching data in the constructor of a React component may cause some troubles. Can someone explain me what kind of troubles are those. Preferably with examples. what's the difference between fetching data in constructor against fetching data in the componentDidMount method.

Solution

  • In React life cycle, constructor method calls before componentDidMount (), but after componentDidMount() method component is ready in the DOM. If you call the API in constructor, data will be fetched but component is not exist in DOM. So, the best way to use the API in componentDidMount() because component is ready and placed in the DOM.