ReactJs: How to pass the initial state when rendering the component?

Question

I know that I can pass props when rendering the component. I also know the getInitialState method. But the problem is that getInitialState does not help much, because my component does not know its initial state. I do. So I want to pass it on while I show it.

Something like this (pseudo code):

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

I know that I could use prop to work as the initial state, but it smells like an anti-pattern.

What should I do?

EDIT FOR CLARITY

Imagine I have a CommentList component. By the time I first created it, the initial state corresponds to a snapshot of the current comments from my database. Since the user includes comments, this list will change, and therefore it should be state , not props . Now, to display the original snapshot of the comments, I have to pass it to the CommentsList component, because it does not have the ability to know this. My confusion is that the only way I see this information is through props , which seems like an anti-pattern.

Answer 1

Only persistent components can use the details in getInitialState . The getInitialState in getInitialState is an anti-pattern if synchronization is your goal. getInitialState is called only when the component is first created, so it can cause some errors because the source of the truth is not unique. Check this answer .

Quote:

Using props passed from the parent to create state in getInitialState often leads to duplication of the “source of truth”, i.e. where is the real data. Whenever possible, calculate the values ​​on the fly so that they do not go out of sync later and cause maintenance problems

You can still do:

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

How they will be the default details for your application. But while you use prop to set a value that does not seem to change, you can use the same support inside the render function.

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

This attribute will not be changed, so with every call to render there is no problem using it.

Edited answer:

In this case, your initial state should not be a support, it should be an ajax call that populates the list of comments.

Answer 2

To quote a React document :

Using the props passed from the parent to generate the state in getInitialState often leads to duplication of the "source of truth", that is, to real data. Whenever possible, calculate the values ​​on the fly to make sure that they do not come out of sync later and do not cause a maintenance problem.

and

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

So, if your details include value and initialValue , then it is clear that the latter is for initialization, and there is no confusion.

See React docs examples for code examples.

Answer 3

If you know the condition, I would be inclined to say that the component that you render does not actually control it. The idea in Reagent is that any private state lives in only one place.

Answer 4

After looking at the other answers and learning a little about it, I came to this conclusion:

If you are rendering in the client (compiled or not), which is the default, you should try to make an additional Ajax call inside your component to get the initial state. That is, do not use props . It is cleaner and less error prone.

However, if you are rendering on a server (Node.js or ReactJs.NET), there is no reason for this additional Ajax call for each request. Moreover, it is not SEO friendly. You want the whole page to appear as a result of your request (including data). So, as @RandyMorris noted, in this case it is normal to use the details as the initial state, if only this is the initial state. That is, no synchronization.