ReactJS: Why is the initial state of the prop-anti-pattern component passed?

Question

I created a small ReactJS toolbar using SocketIO for live updates. Despite the fact that I have a dashboard update, it seems to me that I'm not quite sure if I did it right.

What bothers me the most is the props in getInitialState as an anti-template . I created a dashboard that receives direct updates from the server, without requiring user interaction, without loading the page. From what I read, this.state should contain things that will determine if the component should be re-rendered, and this.props .... I don't know yet.

However, when you initially call React.render(<MyComponent />, ...) , you can only transfer details. In my case, I get all the data from the server, so the original details in any case appear in this.state . So all of my components have something like this:

 getInitialState: function() { return { progress: this.props.progress, latest_update: this.props.latest_update, nearest_center: this.props.nearest_center } } 

What if I misinterpreted the above blog post is an anti-pattern. But I don’t see another way to inject the state into the Component, and I don’t understand why this is an anti-template, if I do not move all my details to add initial to them. Anyway, I feel like this is an anti-pattern, because now I need to track more variables than before (those that were added with initial and without them).

Answer 1

Disclaimer When I answered this question, I was learning / trying to implement vanilla Flux, and I was a bit skeptical about it. Later I redirected everything to Redux. So, a tip: just go with Redux or MobX. Most likely, you do not even need an answer to this question (with the exception of science).

Passing the internal state of the component as prop is an anti-pattern, because the getInitialState method getInitialState called only when the component is first rendered. Never again. This means that if you re-visualize this component by passing another value as prop , the component will not respond accordingly, because the component will retain the state the first time it was rendered. He is very error prone.

And here is what you should do:

Try to make your components as stateless as possible. Stand-alone components are easier to test because they produce output based on input . Just.

But hey .. my data on component changes ... I can't make them standless

Yes you can, for most of them. To do this, select the external component as the status holder. Using your example, you can create a Dashboard component that contains data and a Widget component that is completely stateless. Dashboard is responsible for getting all the data, and then rendering several Widgets that get everything they need through props .

But my widgets have a certain state. The user can configure them. How to make them standless?

Your Widget can post events that, when processed, lead to a change in the state contained in the Dashboard , as a result of which each Widget must be re-deleted. You create "events" in your Widget , having props that receive the function.

So, now the control panel saves the state, but how to transfer the initial state to it?

You have two options. Most recommended is that you call the Ajax call in the Dashboard getInitialState method to get the initial state from the server. You can also use Flux , which is a more sophisticated way to manage data. Flux is more a model than an implementation. You can use pure Flux with the Facebook Dispatcher implementation, but you can use third-party implementations such as Redux , Alt, or Fluxxor .

Alternatively, you can pass this initial state as prop to the Dashboard , explicitly declaring that it is only the initial state .. for example, initialData , for example. If you choose this path, you cannot pass another initial state to it, because it will "remember" the state after the first render.

Obs

You are not quite right in your definitions.

State is used to store mutable data, that is, data that will change during the component's life cycle. State changes must be made using the setState method and cause the component to re-render.

Details are used to transfer the returned data to the components. They should not change during the component life cycle. Components that use only details are stateless.

This is a relevant source of information on how to pass the initial state to the components.