this.state vs state in React

Question

I\'m working in a new codebase. Normally, I would set up state like this in a React component:

class App extends React.Component {
    constructor() {
        s         


        

Answer 1

The end result of both approaches is the same. Both approaches are just setting the initial state of the component. It's worth noting that class properties are a stage 3 proposal, so all development environments may not be able to use them.

I personally like to use the class field variant if nothing else is done in the constructor, as it is less code to write, and you have no super call to worry about.

Example

class Component1 extends React.Component {
  state = { value: this.props.initialValue };

  render() {
    return 
 {this.state.value} 
  }
}

class Component2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: props.initialValue };
  }

  render() {
    return 
 {this.state.value} 
  }
}

function App() {
  return (
    

      
      
    
  );
}