Introduction

Props and state can really be a hard concept to grasp when learning React, but they are essential to writing readable React code. So it's important as a react developer to clearly understand these two concepts. Props and state are part of the concept of reusability as far as React is concerned, the main idea behind props and state is that, props can be passed from outside, where as the state can only be defined and maintained inside the component itself.

In this article, I'll try to explain the concept of props and state in a more understandable term. So relax and grab a cup of cold water.

What we'll cover

• An overview of State

• What are Props in REACT?

• Props vs State in React

An Overview Of State

Essentially what makes React dynamic is the concept of state. In simple terms, state is the data that moves from component to component. Think of it like this, the state of the component is defined inside the components constructor, changes can only be made by calling the setState method. The setState function can be called when a button is clicked, or a text is entered in an input e.t.c. It changes based on the input for the user.

Let's say a user logs into their Instagram account. In React terms this is what will happen. A user types in their account information into the Login form, this data, will be placed into the application state, in real time. This simply means, the other part of the application knows about the content you've just written, which will automatically move down to all child components via props.

When the state of a parent component changes, the child components automatically inherit, the new State. Basically you only need to write the code to change one thing the State and the UI automatically updates.

See ! it's that simple, State allows you to dynamically change elements at once based on one variable.

So, a lot of people, after understanding the concepts of State, often ask the question, so how does this State get communicated between the different Components ? This brings us to Props.

What is Props ?

The other side of State, is how it is passed down to other components, when this happens we call it props. Props is short for property, similar to the properties of HTML elements. On the other hand, the props can come from outside of the component. They are passed down from a parent component and can be both function[s] and object[s] and primitive values.

Props are passed down using a self-defined property name. Take a look at the following example.

const Parent = () => {
  return <Child thisIsaProp={this.state.randomPropName} />;
};

N/B: thisIsaProp name has no special meaning whatsoever.

However, while that is the case it's still important to make any name you give it semantic, it should be meaningful and indicate it's purpose.

For example

const Parent = () => {
         return <Child user = {this.state.user} />;
};

In the above example, the prop has a name that describes it's contents. From it we can infer that it's probably a user object, with user-specific information.

Props vs State in React

In this section, we are going to look at some key difference between Props and State

Props

Props are immutable, they allow you to pass data from one component to another. They are basically used to communicate between components and also make them reusable.

Vs

State

When state changes, many components may change in accordance based on one variable. State is one way to manage data in React. State hold information about the components, but the downside is that they can't make components reusable. They are mutable and are used for reading dynamic changes.

Conclusion

This article gave you a walk down on the difference between Props and State. Hopefully this article will come in handy to help you understand what props and state are fully.

Credit

• Stackoverflow

• Quora

• Codding Addict on YouTube