Differencebetween Using Constructor VS State = {} to Declare State in React Component

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

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,
  }
}

whats the difference between states in constructor or not how it work

This the other way to initialize state . Actually, Babel will transpile your code and add a constructor for you behind the scenes. Please check this article for more details: https://maksimivanov.com/posts/react-state/

What is the difference between using constructor vs getInitialState in React / React Native?

The two approaches are not interchangeable. You should initialize state in the constructor when using ES6 classes, and define the getInitialState method when using React.createClass.

See the official React doc on the subject of ES6 classes.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}

is equivalent to

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

React state (setState) with a function as a value, and class this.state with constructor vs state obj

Since Babel is adding constructor behind scenes for you, there is no need to declare it. You can just omit it and define your state like in the second example, in the end result will be exactly the same.

Constructor props state vs simply state

It's possible to skip explicit constructor if state is all you need to define, because this can be done with class fields proposal:

class Master extends Component {
  state = { searchCoin: false };
  ...

Which is syntactic sugar for ES6:

class Master extends Component {
  constructor(props){
    super(props);
    this.state = { searchCoin: false };
  } 
  ...

This is a matter of taste whether state is defined as class field or as a part of constructor body if there's a need for constructor; class field takes less characters to type because it doesn't contain this.

Also notice that

class Master extends Component {
  constructor(){
    super() 
    slowlog(this, /.*/)
  } 

  state = { searchCoin: false }
  ...

is syntactic sugar for

class Master extends Component {
  constructor(){
    super() 
    this.state = { searchCoin: false };
    slowlog(this, /.*/)
  } 
  ...

Class fields go after super and before other constructor statements. This may not work as intended if slowlog is expected to run first.

React JS Constructor vs useState what's the difference?

Generally, these are two different approaches in React. The constructor type is part of the OOP React approach with the so called class components. There you have class methods instead of functions. And the state is accessed through this.state.<property>.

The other approach is the function components. That's the more modern way of doing stuff with React. useState() is a React hook, responsible for a particular state.

They work the same, however the function-based approach is getting more and more common, so I would suggest to switch to function components, unless something requires the explicit usage of class components.

---

Related Topics