React Props vs State: what are they and main differences you should know

react props 2

Most IT developers must know about ReactJS because it builds simple to complex UI and updates, renders components in the most effective way. What’s more, React also provides services on servers (via Node) and on mobile apps (via React Native). However, today, we are going to focus on the key differences between React props vs state.

You must be wondering what Props vs State are and how they relate to React, right? For example, to build a house, we need lots of different components from the base, to the inside and outside parts. Likewise, props vs state are one of the most crucial elements when building a web or app ‘outside parts’, or User Interface. Yet, these two components are commonly mistaken and they cause lots of confusion.

That’s why ArrowHiTech is here to help you out in this article! We hope that you will read till the end to understand some key points and stay tuned for some short recaps.

And now, let’s get started with some basic concepts!

What is Props?

React Props is short for React Properties. They serve the purpose of passing data from one component to another. Yet, you may think that it is hard to understand because of too many data passings, but the React flow is only uni-directional. In other words, there is only one way for data to be passed from parent to child element.

props

(If you want to learn more what uni or bi-directional flow is, check out this article of MVC and Flux comparison!)

Pass data

This is an example to show you how Props work. (Remember, Parent Component leads to multiple Child Components)

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent name="First Child" />    
        );  
    }
}
const ChildComponent = (props) => {    
    return <p>{props.name}</p>; 
};

Firstly, define data from the ‘parent’ and assign it to the ‘first child’ via this simple code:

<ChildComponent name="First Child" />

Secondly, pass data by giving an argument to the function:

const ChildComponent = (props) => {  
  // statements
};

Lastly, use dot notation to get props access and render the data:

return <p>{props.name}</p>;

In short, the 3 key steps you need to keep in mind are:

  • Define the attribute’s data/value
  • Pass to child components via Props
  • Render Props data

Furthermore, don’t forget that Props data is immutable (read-only).

That’s all for React Props, now let’s head to another component: React State

What is State?

State is another React object that allows different components to manage and develop their own data. That is to say, Props pass data among components and State or setState helps them create data.

react props

Update a component’s state

To update, you need to pass a function, not an object like this following example:

this.state.id = “2020”; // wrong
this.setState({         // correct 
    id: "2020" 
});

Attention!

Pay close attention to these 2 common issues to avoid any hardship!

  • You should not modify State in a direct way, but you can use setState( ) instead.
  • You should not ignore State or use it superficially. Treat it with care and notice because State can affect the performance of your app.

To sum up, you can check out React official sites that we have linked right here for more information!

Now, it is time for our MAIN concern: React Props vs State!

Props vs State Comparison

Firstly, let’s rewind some similarities:

  1. Both are plain JS objects.
  2. Their changes will set off a render update.
  3. Props and State are deterministic. Simply put, the same combination of Props and State results in the same outcome.

Then, about the differences:

1. Purpose of props vs state

Like we’ve mentioned, Props pass the data between components while they can manage and create data by State.

2. Data

Data from React Props is read-only. In addition, it cannot be modified by a component. On the other hand, State data can be changed by its component. However, those changes are private.

3. Components – props vs state

  • Parent:

While both are able to get initial data from parent components, only Props can be changed by them.

  • Child:

Similarly, only Props can change in child components yet both of them can set initial data in them.

  • Inside:

Both can set default data but only State can change inside components.

4. Personal Feature

Coming to personal feature of Props vs state, Props can only be passed from parent to child component. Otherwise, State should be modified with setState ( ) method.

And that’s about it! Above are all key details regarding React Props and State that you should know. If you have any further questions or problems, don’t hesitate to contact ArrowHiTech for the best solutions!

About Us

Founded in 2007, ArrowHiTech is proud to be one of the leading IT outsourcing companies in Vietnam. Besides, with such high dedication and skillful experience, we always try our best to break limits and deliver the optimal solutions to every client. After completing 10,000+ global projects successfully, we hope that you will be the next one to have a vision transformed to amazing reality by us!

arrowhitech

Final Words

That’s all for today’s article! Above all, we hope that you have learned lots of new information on React Props vs State. Moreover, if you want to read more useful articles, check out our Web App Development and ReactJS development services

Thank you for joining us today! And as always, we truly wish you the best of good luck and success! We would be glad to hear from you at: Contact Form

Tags

Share