React getInitialState using props

Question

When setting the initial state of a component, using data passed in via props, should I create a new object, doing something like...

getInitialState: function () {
    return {
        fieldData: JSON.parse(JSON.stringify(this.props.data))
    };
}

or is it safe to just do...

getInitialState: function () {
    return {
        fieldData: this.props.data
    };
}

You need to provide more information. This question is too vague as is. Are you mutating fieldData in some way? Do you only send it up when the user clicks save? etc. — Brigand, Dec 09 '14 at 21:48

score 7 · Accepted Answer · answered Dec 09 '14 at 21:20

7

Transferring props to the component's state is considered a bad practice: http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

It might be best to consider a different approach. You can access props directly and the component will update when the props are changed.

answered Dec 09 '14 at 21:20

Shawn

919
6
11

4

It _is_ acceptable for getting initial state: "However, it's not an anti-pattern if you make it clear that synchronization's not the goal here:" – Nick Tomlin Apr 30 '15 at 03:22
2

how come the uiexplorer examples do this in the react native repo? – SuperUberDuper Oct 10 '15 at 19:49
1

*Why* is this bad practice? – Kenny Worden Jun 17 '16 at 15:28
2

@KennethWorden per [this Q/A](http://stackoverflow.com/questions/28785106/reactjs-why-is-passing-the-component-initial-state-a-prop-an-anti-pattern): "Passing the intial state to a component as a prop is an anti-pattern because the getInitialState method is only called the first time the component renders. Never more. Meaning that, if you re-render that component passing a different value as a prop, the component will not react accordingly, because the component will keep the state from the first time it was rendered. It's very error prone." – Brandon Aug 19 '16 at 16:00
For more details about why this is an anti-pattern, and what to do instead, see [You probably don't need derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html). This has links to code snippets at codesandbox, that demonstrate what is discussed. – ToolmakerSteve Oct 31 '19 at 11:33

score 0 · Answer 2 · edited Aug 10 '20 at 20:42

Its been many years since the accepted answer, and I would like to add some points that were possibly not as clear back in 2014:

Props to purely initialise state

It is considered fine to seed state from special initial state props. In the example above, you would have initialFieldData

class Form extends React.Component {
   state = { fieldData: this.props.initialFieldData };
   resetFieldData = () => 
      setState( () => ({ fieldData: this.props.initialFieldData }));

`static getDerivedStateFromProps()` (docs)

React 16.3-alpha introduced the static function, that allows you to map a your regular props to state (to replace componentWillReceiveProps). A few things to note:

Importantly this is static function: you can't directly access this, but you can access state. In some unusual situations, one might find themselves putting instance values (e.g. refs) into state, just so they can be accessed there.
Runs on mount AND each prop change

React getInitialState using props

2 Answers2

Props to purely initialise state

static getDerivedStateFromProps() (docs)

`static getDerivedStateFromProps()` (docs)