ReactJS Props vs. State

Common ground

Both props and state are plain JS objects
Both props and state changes trigger a render update
Both props and state are deterministic. If your Component generates different outputs for the same combination of props and state then you're doing something wrong.

Stateless Component

Only props, no state.
There's not much going on besides the render() function and all their logic revolves around the props they receive. This makes them very easy to follow (and test for that matter).
We sometimes call these dumb-as-f*ck Components (which turns out to be the only way to misuse the F-word in the English language).

Stateful Component

Both props and state.
We also call these state managers.
They are in charge of client-server communication (XHR, web sockets, etc.), processing data and responding to user events. These sort of logistics should be encapsulated in a moderate number of Stateful Components, while all visualization and formatting logic should move downstream into as many Stateless Components as possible.

Props

Props are passed into the components

The property is passed to the component, similar to argument is passed to a function. In fact,


class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}

const element = ;

could be written as
```jsx
function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}

Somehow, it means that props is passed from above. Almost, but not always. A component can also have default props, so if a prop isn’t passed through, it can still be set.
```
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
```

Welcome.defaultProps = { name: "world", };

If `Welcome` is called without a `name` it will simply render `<h1> Hello world</h1>`
#### Props should not change
- Props contains information set by the parent component (although defaults can be set) and should not be changed
- React components that use only `props` are considered as `pure`, they render the same output given the same input (props that passed in)

### State

#### State is created in the component
```jsx
class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

The constructor is where state gets its initial data. The inital data can be hard coded as above (count: 0), but it can also come from props.

State is changeable

State contains “private” information for the component to initialise, change, and use on it’s own
```
updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}
```
We change the state to keep track of the total number of clicks

Do not use

// DO NOT USE
this.state.count = this.state.count + 1

React cannot listen to the state getting updated in this way, so your component will not re-render

Do not use

// DO NOT USE
this.setState({
  count: this.state.count + 1
});

This does not take into account the asychronous nature that setState can use and might cause errors.

Do use

// DO USE
render() {
  return (<button
            onClick={() => this.updateCount()}
          >
            Clicked {this.state.count} times
          </button>);
}

The onClick={() => this.updateCount()} means that when the button is clicked the updateCount method will be called
We need to use ES6’s arrow function so updateCount will have access to this instance’s state

The State flow

The component is initialised and state.count is set to 0
```
this.state = {
  count: 0,
};
```
The component renders, with Clicked 0 times as the button text
```
Clicked {this.state.count} times
```
The user clicks the button
updateCount is called, bound to this instance of the component
```
onClick={() => this.updateCount()}
```
updateCount calls setState with a call back to increase the counter from the previous state’s counter value
```
updateCount() {
this.setState((prevState, props) => {
  return { count: prevState.count + 1 }
});
}
```
setState triggers a call to render >> MAGIC !!!
The component renders, with Clicked 1 times as the button text
```
Clicked {this.state.count} times
```

8bitzz / blogs