3

I would like to know difference between rendering component with state or props directly.

getInitialState:
    data: this.props.data

Following code is for render function

1.

data = this.state.data
return (<Component data={data} />)

2.

return (<Component data={this.state.data} />)

3.

return (<Component data={this.props.data} />)

First two situations are crashing when I use setState on listening reflux action. If anyone has recommendations to use other than setState or tell me the difference about those three code snippets would be very much appreciated.

Improve this question

2 Answers 2

Reset to default
6

Putting props in state like this:

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

is an anti-pattern, unless you intend to modify the value of someKey later on and you use the prop as just an initial value.

So if you don't change the value of the prop passed in, you should go with number three.

The difference is that a component that doesn't have state can be considered "pure" (the same props passed in gives the same output, everytime) and those components are almost always easier to reason about. Duplicating the prop in state without mutating the state just gives you more lines of code in the component, and it might confuse someone else reading the code. It's a pure component disguised as an impure component.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I want to edit the props because the value is passed to form. I am using reflux store and action to save and load data. Do you think i should listen to data change on child or parent element?
2

A bit more about props and states. Props and state are related. The state of one component will often become the props of a child component. Props are passed to the child within the render method of the parent as the second argument to React.createElement() or, if you're using JSX, the more familiar tag attributes.

<MyChild name={this.state.childsName} />

The parent's state value of childsName becomes the child's this.props.name. From the child's perspective, the name prop is immutable. If it needs to be changed, the parent should just change its internal state:

this.setState({ childsName: 'New name' });

and React will propagate it to the child for you. A natural follow-on question is: what if the child needs to change its name prop? This is usually done through child events and parent callbacks. The child might expose an event called, for example, onNameChanged. The parent would then subscribe to the event by passing a callback handler.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

The child would pass it's requested new name as an argument to the event callback by calling, e.g., this.props.onNameChanged('New name'), and the parent would use the name in the event handler to update its state.

handleName: function(newName) {
   this.setState({ childsName: newName });
}
Improve this answer

3 Comments

@molderf. If I load all data in the parent level, should I pass changeHandler to all children? What should I do if there are children in multiple depth?
@sean actually you dont need pass changeHandler to all children, React updates only what has changed, if parent has changed then you dont need push handler to down (i mean tree). in the end i dont know your application structure, if you have separated all components right, react updates everything correct
I mean there are multiple children and the value of children are loaded from parent componentDidMount. If we store state in parent, we should pass change handler, don't we?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.