ReactJs: How to pass the initial state while rendering a component?

Question

I know I can pass props while rendering a component. I\'m also aware of the getInitialState method. But the problem is, getInitialState

Answer 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.

Answer 2

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.

Answer 3

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.

Answer 4

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.