You should move all the code from the componentWillMount to the constructor or componentDidMount.

componentWillMount() is invoked just before mounting occurs. It is called before render(), therefore calling setState() synchronously in this method will not trigger an extra rendering. Generally, we recommend using the constructor() instead. Avoid introducing any side-effects or subscriptions in this method. For those use cases, use componentDidMount() instead. This is the only lifecycle hook called on server rendering.

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount(). Calling setState() in this method will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

From the official docs

Answer from Vladimir K. on Stack Overflow
Top answer
1 of 3
42

You should move all the code from the componentWillMount to the constructor or componentDidMount.

componentWillMount() is invoked just before mounting occurs. It is called before render(), therefore calling setState() synchronously in this method will not trigger an extra rendering. Generally, we recommend using the constructor() instead. Avoid introducing any side-effects or subscriptions in this method. For those use cases, use componentDidMount() instead. This is the only lifecycle hook called on server rendering.

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount(). Calling setState() in this method will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

From the official docs

2 of 3
16

componentDidMount isn't deprecated and is definitely still safe to use, so there's no need to add UNSAFE_ to that method. The componentWillSomething methods are the ones that seem to be on their way out. Instead of componentWillMount, use a constructor for the stuff that doesn't produce side-effects, and use componentDidMount for the stuff that does.

🌐
Gitbooks
developmentarc.gitbooks.io › react-indepth › content › life_cycle › birth › premounting_with_componentwillmount.html
Pre-Mounting with componentWillMount() · react-indepth
Now that the props and state are set, we finally enter the realm of Life Cycle methods. The first true life cycle method called is componentWillMount(). This method is only called one time, which is before the initial render. Since this method is called before render() our Component will not ...
🌐
DEV Community
dev.to › torianne02 › componentwillmount-vs-componentdidmount-5f0n
componentWillMount() vs componentDidMount() - DEV Community
September 27, 2019 - Using a fetch call within componentWillMount() causes the component to render with empty data at first, because componentWillMount() will NOT return before the first render of the component. Due to the fact that JavaScript events are async, when you make an API call, the browser continues to do other work while the call is still in motion. With React, while a component is rendering it doesn’t wait for componentWillMount() to finish, so the component continues to render.
🌐
Pluralsight
pluralsight.com › tech insights & how-to guides › tech guides & tutorials
How to Use componentWillMount in React | Pluralsight
August 31, 2020 - One of the primary usages of componentWillMount() is to make API calls once the component is initiated and configure the values into the state.
🌐
GitHub
github.com › software-mansion › react-native-reanimated › issues › 353
Warning: componentWillMount is deprecated · Issue #353 · software-mansion/react-native-reanimated
July 26, 2019 - Issue I'm receiving a warning about componentWillMount is deprecated. Warning: componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UN...
Author   vikrantnegi
Top answer
1 of 3
1

componentWillMount is one the first function to be run when creating a component. getDefaultProps is run first, then getInitialState then componentWillMount. Both getDefaultProps and getInitialState will be run only if you create the component with the react.createClass method. If the component is a class extending React.Component, those methods won't be run. It is recommended to use componentDidMount if you can instead of componentWillMount because your component can still be updated before componentWillMount and the first render.

You can find more info on the react component lifecycle here

Also, it is recommended to set the state or the default props inside the class constructor or using getDefaultProps and getInitialState.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: 'foo' };
  }

  static defaultProps = {
    foo: 'bar'
  };
}

EDIT: Here's the component handling login

import React, { Component } from 'react';
import { View, Text, ActivityIndicatorIOS } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../../actions';
import LoginButton from '../../components/Login';
import reducers from '../../reducers';
import { Card, CardSection, Button } from '../../components/common';

class Login extends Component {
  componentDidMount() {
    // If user is already logged in
    if(this.props.auth.loggedIn) {
      // redirect user here
    }
  }

  componentWillReceiveProps(nextProps) {
    // If the user just log in
    if(!this.props.auth.loggedIn && nextProps.auth.loggedIn) {
      // Redirect user here
    }
  }

  render() {
    console.log(this.props.auth);
    const { actions, auth } = this.props;
    var loginComponent = <LoginButton onLoginPressed={() => actions.login()} />;
    if(auth.error) {
      console.log("erreur");
      loginComponent = <View><LoginButton onLoginPressed={() => actions.login()} /><Text>{auth.error}</Text></View>;
    }
    if (auth.loading) {
      console.log("loading");
      loginComponent = <Text> LOL </Text>;
    }
    return(
      <View>
        <Card>
          <CardSection>
            { auth.loggedIn ? this.props.navigation.navigate('Home') : loginComponent }
          </CardSection>
        </Card>
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    auth: state.auth
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actionCreators, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);
2 of 3
1

Based on your comment to Ajay's answer, you are looking to set the initial state in the component. To do so, you would set the state inside the constructor function.

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: props.initialColor
    };
  }  

If you have data that is fetched asynchronously that is to be placed in the component state, you can use componentWillReceiveProps.

componentWillReceiveProps(nextProps) {
  if (this.props.auth !== nextProps.auth) {
    // Do something if the new auth object does not match the old auth object
    this.setState({foo: nextProps.auth.bar});
  }
}
🌐
Sentry
sentry.io › sentry answers › javascript › warning: componentwillmount has been renamed, and is not recommended for use
Warning: componentWillMount has been Renamed, and is not Recommended for Use | Sentry
// Before class AppComponent extends React.Component { state = { data: null, }; componentWillMount() { fetch('https://sentry.io/data').then(res => { this.setState({ data: res.json() }); }); } }
🌐
EDUCBA
educba.com › home › software development › software development tutorials › react native tutorial › react componentwillmount()
React componentWillMount() | Working and Example with Advantages
April 11, 2023 - Second thing it will perform is, it will call to the componentWillMount() function and inside this function we can perform some of the important things, like modification of the data coming from the server to display better contents to the customer, and we can change some static data also to display for the end users. Finally the main function of the react will be called render function, as we know the main purpose of the render function in the react js is to display for the end users.
Address   Unit no. 202, Jay Antariksh Bldg, Makwana Road, Marol, Andheri (East),, 400059, Mumbai
Find elsewhere
🌐
Gitbooks
developmentarc.gitbooks.io › react-indepth › content › life_cycle › birth › post_mount_with_component_did_mount.html
Post-Mount with componentDidMount() · react-indepth
We can also add more global listeners ... in the componentWillMount() call. There are some unique situations where we may have a second render immediately after Birth/Mount. This is not a common situation and generally occurs when we have to change our current state based on the Native UI ...
🌐
GeeksforGeeks
geeksforgeeks.org › reactjs › what-is-componentwillmount-method-in-reactjs
What is ComponentWillMount() method in ReactJS ? - GeeksforGeeks
July 27, 2025 - The componentWillMount() lifecycle ... componentWillMount() method allows us to execute the React code synchronously when the component gets loaded or mounted in the DOM (Document Object Model)....
🌐
HackerNoon
hackernoon.com › how-to-use-componentwillmount-with-functional-components-in-react-fc143u9d
How to use componentWillMount with Functional Components in React | HackerNoon
August 10, 2020 - Functional components are far more efficient than class based components. Less code is needed to be written to achieve the same goal.
🌐
Northcoders
northcoders.com › home › blog › react: componentwillmount to be deprecated!
React: componentWillMount to be deprecated! | Northcoders
May 6, 2025 - Often you will need to asynchronously fetch data from other servers, and many people use componentWillMount to do this. But asynchronous data fetches won’t return before the component renders, and that means that the component will re-render more than once. So, where shall we fetch the data instead? Easy. Use componentDidMount! For more information about the future of React and other new features then check out Dan Abramov’s top notch talk as JSconf!
🌐
Dave Ceddia
daveceddia.com › where-fetch-data-componentwillmount-vs-componentdidmount
Where to Fetch Data: componentWillMount vs componentDidMount
First, the big one: componentWillMount is deprecated as of React 16.3 (March 2018). Until React 17, that name will continue to work – but this is a warning to move away from it as soon as you can.
🌐
GitHub
github.com › facebook › react-native › issues › 16806
componentWillMount, componentWillReceiveProps and render being called twice times · Issue #16806 · facebook/react-native
November 13, 2017 - Is this a bug report? Yes Bug I created new app with react-native-init , and i added log to know it's a bug from react-native or from my code ; export default class App extends PureComponent { componentWillMount() { console.log('comp...
Author   Kottidev
🌐
sebhastian
sebhastian.com › react-componentwillmount
Understanding React componentWillMount method | sebhastian
November 23, 2020 - The componentWillMount method is a lifecycle method of React library that gets executed inside components right before the component gets attached to the DOM.
🌐
TutorialsPoint
tutorialspoint.com › reactjs-componentwillmount-method
ReactJS – componentWillMount() Method
March 18, 2021 - This method is used during the mounting phase of the React lifecycle. This function is generally called before the component gets loaded in the DOM tree. This method is called before the render() method is called, so it can be used to initialize the state but the constructor is preferred.
🌐
GeeksforGeeks
geeksforgeeks.org › reactjs-componentdidmount-method
ReactJS componentDidMount() Method | GeeksforGeeks
April 11, 2025 - This method is used to implement the Error Boundaries for the React application. It is called during the commit phase, so unlike getDerivedStateFromError() w ... The componentWillMount() method invokes right before our React component gets loaded ...
🌐
GitHub
github.com › facebook › react › issues › 10972
Recommend using componentWillMount instead of using a constructor · Issue #10972 · facebook/react
September 29, 2017 - Using componentWillMount, you extract props like you normally would in any other method in a React class. Also setting state is exactly the same as every other method in a React class.
Author   jonricaurte
🌐
GeeksforGeeks
geeksforgeeks.org › how-to-use-componentwillmount-in-react-hooks
How to use componentWillMount() in React Hooks? | GeeksforGeeks
July 6, 2023 - The componentWillMount() method allows us to execute the React code synchronously when the component gets loaded or mounted in the DOM (Document Object Model).