What is the difference between using constructor vs state = {} in React / React Native?

Question

I have seen both

export default class LoginScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      loading: false,
      loggedIn: false,
    }
  }
}

and

export default class LoginScreen extends React.Component {
  state = {
    loading: false,
    loggedIn: false,
  }
}

What are the use cases for both? Are there advantages / disadvantages? Is one a better practice?

score 13 · Accepted Answer · answered Mar 01 '18 at 13:32

13

Use constructor when you want to save props data into state

export default class LoginScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      loading: props.loading,
      loggedIn: props.loggedIn,
    }
  }
}

Otherwise you can directly set the state for hard coded data

export default class LoginScreen extends React.Component {
  state = {
    loading: false,
    loggedIn: false,
  }
}

answered Mar 01 '18 at 13:32

Piyush Dhamecha

1,485
1
13
22

Copying props into state is considered an anti pattern by the official docs: https://reactjs.org/docs/react-component.html#constructor – Remi Jul 22 '19 at 09:09
@Remi Please read this para `Only use this pattern if you intentionally want to ignore prop updates.`, you can store props to state for default or initial value. – Piyush Dhamecha Jul 26 '19 at 15:38

score 0 · Answer 2 · answered Mar 01 '18 at 13:34

0

The performance is same in both the cases so it's just a matter of personal preference. Defining state outside of class happens to be a newer implementation than defining it inside a constructor so I would suggest you use explicit state definition.

answered Mar 01 '18 at 13:34

Nagarjun Prasad

802
3
17
31

What is the difference between using constructor vs state = {} in React / React Native?

2 Answers2