React Props vs State

Lets first dive into the similarities between Props and State side by side

  • Both are just objects in our components

  • Both can be used when rendering components

  • Changes to both causes re-renders

Component Props

They are used for passing dynamic data in the React component where the data is just a key-value pair. This creates a one-way data communication flow. Props come from above whether it's a parent component or some JSX that gets passed into ReactDom render method. Props can not be changed by the component itself.

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}
// passing data to instance of component
ReactDOM.render(<Welcome name="World"/> , document.getElementById('app'));

The above code creates a one-way data flow and can be used to inject dynamic values in the component.

A component can also have default props, so if a prop isn’t passed through it can still be set.

We can make the name property optional by adding defaultProps to the Welcome class:

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

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

Props allow one-way data flow(Parent to Child) and not upstream (Child to Parent not possible).

However, to reverse the one-way data flow we can use function and pass them as props to solve this problem.

COMPONENT STATE

A state is just an object with key-value pair essential for an interactive application. When a component needs to keep track of information between renderings the component itself can create, update, and use state.

Steps to setup State

  1. Setup default state object

  2. Component rendered with default state values*

  3. Change state based on event

  4. Components re-rendered using new state values*

*(Implicitly happened behind the scene by React Component API)

//Counter Appclass Counter extends React.Component{
 constructor(props){
  super(props);
   this.handleAddOne=this.handleAddOne.bind(this);
   this.handleMinusOne=this.handleMinusOne.bind(this);
   this.handleReset=this.handleReset.bind(this);
   // Setting up default state object
this.state={
   count:0   }
 }
 handleAddOne() {
  this.setState((prevState) => {
   return {
    count:prevState.count+1    };
  });
 }
 handleMinusOne() {
  this.setState((prevState) => {
   return {
    count:prevState.count-1    };
  });
 }
 handleReset() {
  this.setState(() => {
   return {
    count:0    };
  });
 }
 render(){
  return(
   <div>
   <h1>Count :{this.state.count}</h1>
//Changing state based on user click
 <button onClick={this.handleAddOne}>+1</button>
   <button onClick={this.handleMinusOne}>-1</button>   <button onClick={this.handleReset}>Reset</button></div>
)}}
 ReactDOM.render(<Counter/>,document.getElementById('app'));

The app can be found here.

Summary

If you want to track down changing data you have to use state because the state can be changed by the component itself as can be seen in the Counter App.

A state is defined in the component itself

Props, on the other hand, make components reusable by giving components the ability to receive data from the parent component in the form of props.

Thanks for reading!

© 2021 Asim Ansari | Software Engineer at inFeedo