React Basics: Props vs. State

Source: https://reactjs.org/

Perhaps one of the most confusing aspects of learning React is understanding the difference between Props and State and how they are used to pass data and functions throughout your application. Google ‘React props vs. state’ and you’ll get tons of blogs and articles trying to define these concepts for the new React user. As everyone learns and has things ‘click’ differently, this blog post is my own attempt at describing these concepts from my own perspective. Before we continue however, let’s establish some basic information about React first.

What is React?

React.js is a Javascript library whose purpose is to make it easier to create your app’s frontend through the use of Components, which are .js files that can include data manipulation, logic, functions, and most importantly, implement a render method to return your view (if you’re familiar with MVC logic) to your user.

Not only are Components usually divided between presentational and container categories (how things look and how things work) but they are able to work together in your application to send data through the use of State and Props. Container components will contain both props and state, while presentational components will not contain logic, and thus have on props. For more information about Components, click here.

What is State?

I like to think of state as the data that you are keeping track of and manipulating to change the rendered HTML when displaying that specific component. It is a plain JS object which is mounted or created and inserted into the DOM and through methods (often user interaction) it can be updated by using the method setState().

For example, if I wanted to keep track of items in a cart or students in a classroom, I might have an component with an initial state like this:

class Cart extends React.Component {
    
    constructor(){
        super()
        this.state = {
             numberOfItems: 0        
        };
      
}

As my component’s state is updated, I can display the number of items through my render method.

One reason why state is a bit hard to understand is that as the developer you will not be able see the state change directly, but rather will need to either use an extension to monitor the state change while viewing your app in your browser, or have a way of displaying state after it has changed. So from the developer’s perspective, the data you are manipulating is abstract and of course after each refresh of your page the DOM will be remounted as well.

Another issue is that this state or data you are getting through state is only accessible by that component at that time…unless you pass them as props!

What are Props?

Props, short for properties, is way to send specific data from one React component to another. Say I had a Classroom component and I wanted to display my students through a separate Students component instead of displaying them in my Class component, I might pass down the props like this:

class Classroom extends React.Component {
     constructor(){
        super()
        this.state = {
             students: [{name: "John"}, {name: "Jessie"}]      
        };
     render() {
        return (
           <div> 
         <Students students={this.state.students}>
          </div>
        );
      }
}

Then in my Students component, it would look like this:

const Students = props => {
 return (
 <div>
   <h1> Students: {props.students.map(student => <li>{student.name}</li>)}</h1>
 </div>
 );
};

In this case, my Students component will have access to the data from my Classroom component through the passed down props, and will be able to display it as my Classroom component changes.

In Summary

Both state and props represent data accessible to the developer to display in a render method. However, while state data is created, accessed, and manipulated within a single component, props are data passed down from one component to another and are immutable.

With state, a developer must keep track of how it might change as it is manipulated by either the user or developer’s actions, while with props, a developer must keep track of what exactly is being passed down to and is accessible in a presentational component in their app. If it isn’t written or organized clearly, this can easily become a headache for a developer to navigate, so as you are working on your React app, keep these differences in mind!