Props vs State in React

What is the difference between state and props in React?

In a React component, props are variables passed to it by its parent component. State, on the other hand, consists of variables that are directly initialized and managed by the component itself.

The state can be initialized using props. For example, a parent component can include a child component by calling:

<ChildComponent />

The parent can then pass a prop to the child component using the following syntax:

<ChildComponent color="green" />

Inside the constructor of the ChildComponent, we can access the prop:

class ChildComponent extends React.Component {
 constructor(props) {
 super(props)
 console.log(props.color)
 }
}

Any other method in this class can reference the props using this.props.

Props can be used to set the internal state based on a prop value in the constructor, like this:

class ChildComponent extends React.Component {
 constructor(props) {
 super(props)
 this.state.colorName = props.color
 }
}

Of course, a component can also initialize the state without relying on props. However, if you want to do something different based on the prop value, setting a state value is generally the best approach.

It’s important to note that props should never be changed in a child component. If there is a need to alter a variable, it should belong to the component state.

Props are also used to allow child components to access methods defined in the parent component. This is a good way to centralize the management of state in the parent component and avoid children needing to maintain their own state.

In most cases, components will simply display information based on the props they received and remain stateless.