19

I know I can pass props while rendering a component. I'm also aware of the getInitialState method. But the problem is, getInitialState isn't quite helping because my component doesn't know it's initial state. I do. So I want to pass it while I'm rendering it.

Something like this (pseudo-code):

React.render(<Component initialState={...} />);

I know I could use a prop to work as the initial state but this smells like an anti-pattern.

What should I do?

EDIT FOR CLARITY

Imagine I have a CommentList component. By the time I first render it, the initial state corresponds to the snapshot of current comments from my database. As the user includes comments, this list will change, and that's why it should be a state and not props. Now, in order to render the initial snapshot of comments I should pass it to the CommentsList component, because it has no way to know it. My confusion is that the only way I see to pass this information is through a props which seems to be an anti-pattern.

Improve this question
2
  • 1
    facebook.github.io/react/tips/… -- I think the last section applies here. If this is ONLY initial state and you make that clear then it's probably ok. Commented Jan 13, 2015 at 19:28
  • @RandyMorris that makes a lot of sense actually. If I'm doing server rendering for the first request (Node.js or ReactJs.NET), I definetely don't want to make an extra Ajax call to get the data. That's not even SEO friendly. Commented Jan 15, 2015 at 0:31

4 Answers 4

Reset to default
15

Disclaimer: Newer versions of React handle this on a different way.

Only permanent components might be able to use props in the getInitialState. Props in getInitialState is an anti-pattern if synchronization is your goal. getInitialState is only called when the component is first created so it may raise some bugs because the source of truth is not unique. Check this answer.

Quoting documentation:

Using props, passed down from parent, to generate state in getInitialState often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble

You can still do:

getInitialState: function() {
   return {foo: this.props.foo}
}

As they will be the default props for your app. But as long as you are using a prop to set a value that presumably won't change, you can use the same prop inside of the render function.

<span>{this.props.foo}</span>

This props won't be modified, so no problem using it each time the render is called.

Edited answer:

In this case your initial state should not be a prop, should be an ajax call which populates the comment list.

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

4 Comments

Thanks for the reply. So, you are saying that I can use props in the getInitialState even though it's an anti-pattern? So, can you please tell me how to solve the problem I proposed in the question edit?
The React tutorial is about this: facebook.github.io/react/docs/tutorial.html
Hum.. So, you would probably agree that, in order to prevent multiple Ajax calls (one for each component), I should make the top-most component to be the stateful one and the others would just be rendered with props, right?
That will be (IMMO) the react way of do it.
3

To quote the React docs:

Using props, passed down from parent, to generate state in getInitialState often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble

And:

However, it's not an anti-pattern if you make it clear that synchronization's not the goal here

So if your props include a value and an initialValue, then it's clear that the latter is for initialization, and there's no confusion.

See the React docs for code examples.

Improve this answer

2 Comments

Nice answer, should I update mine to include your information and correct the anti-pattern missconcept?
Sure, feel free to include/copy/paste, etc.
1

If you know the state then I would tend to argue that the component you are rendering is not really in control of it. The idea in React is that any particular piece of state lives in only a single location.

Improve this answer

2 Comments

Thanks for the reply. The component shouldn't know the state. It should render whatever I tell him to render? Right? I updated the question with a scenario that I'd like to know how you would handle.
The holder of the comments that was creating the list would manage the state to me. The CommentList would simply be responsible for rendering them.
0

After seeing the other answers, and studying a little bit about it, I've come to this conclusion:

If you are rendering React in the client (compiled or not), which is the default approach, you should try to make an extra Ajax call from inside your component to get the initial state. That is, don't use props. It's cleaner and less error prone.

However, if you are rendering in the server (Node.js or ReactJs.NET), there's no reason to make this extra Ajax call for each request.. Besides, it's not SEO friendly. You want the complete page to come as the result of your request (including data). So, as @RandyMorris pointed out, in this case it's ok to use props as the initial state, as long as it's exclusively the initial state. That is, no synchronization.

Improve this answer

Comments

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.