Props and state are the input data for rendering the component. Both props and state are actually JavaScript objects, and the component is re-rendered when props or state are changing.

The props are immutable, so the component cannot change its props. The props are received from the parent component. The component can access the props through the this.props object. For example, take a look at the following component:

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

The parent component can send props to the Hello component in the following way:

<Hello user="John" />

When the Hello component is rendered, it shows the Hello World John text.

The state can be changed inside the component. The initial value of the state is given in the component's constructor. The state can be accessed by using the this.state object. The scope of the state is the component, so it cannot be used outside the component where it is defined. As you can see in the following example, the props are passed to the constructor as an argument and the state is initialized in the constructor. The value of the state can then be rendered in JSX using curly brackets, {this.state.user}:

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {user: 'John'}
  }

  render() {
    return <h1>Hello World {this.state.user}</h1>;
  }
}

The state can contain multiple values of different types because it is a JavaScript object, as in the following example:

  constructor(props) {
    super(props);
    this.state = {firstName: 'John', lastName: 'Johnson', age: 30}
  }

The value of the state is changed using the setState method:

this.setState({firstName: 'Jim', age: 31});  // Change state value

You should never update the state by using the equals operator because then the React doesn't re-render the component. The only way to change state is to use the setState method, which triggers re-rendering:

this.state.firstName = 'Jim'; // WRONG

The setState method is asynchronous and therefore you cannot be sure when the state will be updated. The setState method has a callback function that is executed when the state has been updated.

The usage of the state is always optional and it increases the complexity of the component. The components that have only the props are called stateless components. It will always render the same output when having the same input, which means they are really easy to test. The components that have both state and props are called stateful components. The following is an example of the simple stateless component and it is defined using the class. You can also define it by using the function:

export default class MyTitle extends Component {
  render() {
    return (
     <div>
      <h1>{this.props.text}</h1>
     </div>
    );
 };
};

// The MyTitle component can be then used in other component and text value is passed to props
<MyTitle text="Hello" />
// Or you can use other component's state
<MyTitle text={this.state.username} />

If you are updating the state values that depend on the current state, you should pass an update function to the setState() method instead of the object. A common case to demonstrate this situation is the counter example shown here:

// This solution might not work correctly
incerementCounter = () => {
 this.setState({count: this.state.count + 1});
}

// The correct way is the following
incrementCounter = () => {
  this.setState((prevState) => {
    return {count: prevState.count + 1}
  });
}