React component initialize state from props

Question

In React, are there any real differences between these two implementations? Some friends tell me that the `FirstComponent` is the pattern, but I don't see why. The `SecondComponent` seems simpler because the render is called only once. First: ``` import React, { PropTypes } from 'react' class FirstComponent extends React.Component { state = { description: '' } componentDidMount() { const { description} = this.props; this.setState({ description }); } render () { const {state: { description }} = this; return ( ); } } export default FirstComponent; ``` Second: ``` import React, { PropTypes } from 'react' class SecondComponent extends React.Component { state = { description: '' } constructor (props) => { const { description } = props; this.state = {description}; } render () { const {state: { description }} = this; return ( ); } } export default SecondComponent; ``` Update: I changed `setState()` to `this.s…

Accepted Answer

It should be noted that it is an anti-pattern to copy properties that never change to the state (just access .props directly in that case). If you have a state variable that will change eventually but starts with a value from .props, you don't even need a constructor call - these local variables are initialized after a call to the parent's constructor:

```
class FirstComponent extends React.Component {
  state = {
    x: this.props.initialX,
    // You can even call functions and class methods:
    y: this.someMethod(this.props.initialY),
  };
}
```

This is a shorthand equivalent to the answer from @joews below. It seems to only work on more recent versions of es6 transpilers, I have had issues with it on some webpack setups. If this doesn't work for you, you can try adding the babel plugin `babel-plugin-transform-class-properties`, or you can use the non-shorthand version by @joews below.

React component initialize state from props

Solution

Problem

Related problems