Once installed, ReactJS components can receive new properties or new state. What's going on differently inside the component?

The big difference between government and props is responsibility. Stateful, all the way down to the component itself to fetch whatever data it needs and update its own state, which will cause the component to re-render.

With props, it's not the component itself that fetches the data, but before the parent component. The parent fetches the data and updates its state, and in the render method passes this state as a prop for the child component.

Components that do not have their own state but only receive data passed as props are much easier to understand. They are "clean" in that they have no side effects. Passing the same props to these components will always give the same result. These components often only have a render method as they often don't need anything else other than to render what has been passed in as props.

When you have components that have a condition, you need to think more about how you mutate that condition and what side effects it causes.

So, since stateless components are easier to keep error-free, a rule of thumb when working with React is to have as few stateful components as possible and also keep them at the top of the component hierarchy. These state components then pass data as props for stateless components. If you have multiple stateful components and the rest are stateless, you know that most of the complexity of an application is contained in those stateful applications. Therefore, it's easier to focus on keeping them in the right position instead of sprinkling complexity all over the place.

EDIT

Update for the term "component hierarchy".

The component hierarchy is your React components, and the top component is the one you pass to React.render()

. So this is an example where Top

is the top and Bottom

is the one at the bottom and you want to store the state in Top

and not in Bottom

.

var Top = React.createClass({
  getInitialState() {
    return {
      data: {title: '', contents: ''}
    };
  },
  componentWillMount() {
    SomeAsyncService.fetch()
      .then(data => this.setState({data: data}));
  },
  render() {
    return (
      <Middle 
        title={this.state.data.title} 
        contents={this.state.data.contents}
      />
    );
  }
});

var Middle = React.createClass({
  render() {
    return (
      <h1>{this.props.data.title}</h1>
      <Bottom contents={this.props.contents} />
    );
  }
});

var Bottom = React.createClass({
  render() {
    return (
      <p>{this.props.contents}</p>
    );
  }
});

      

        
        
        
      

    

Ideally, you select and manage all the states of your applications in that top component and just pass that data along with the child components as props and they don't know anything about where they came from, which makes them simpler. But as I said, it can only get out of hand for one stateful component, but you should aim to keep the state as close to the top level as possible.

Or, if you are using react-router , you fetch the data in each component of the route handler and pass the data down to those routes to the child components.