Differences between Props and State in ReactJS

Recently I have learned about ReactJS, in the process of searching, I found Props and State are used quite a lot. So what are they and how are they different, in this article, I will show you about those parts.

1.Props

• Concept: is a short word for properties , but it is a concept in ReactJS. props is an object, it stores the values ​​of the attributes of a tag. The way in which a component can get the values ​​of the attribute passed from outside, and is how that components can talk to each other.

For example :

In particular, the name in {props.name} is the property, Welcome is the Component. Each property of the Component will correspond to an attribute of the tag, the value of the attribute will be passed to the property of the Component.

• We use props to pass data to components.
• Every component is called a pure javascript function.
• props correspond to the parameter of the pure function javascript.
• Unable to change props data.

For the above example, the line <Welcome name="ReactJS" /> creates a Component Welcome and the attribute has a value of ReactJS , above we have a component function that returns Hello, {props.name} and so on, {props.name} will give us the value ReactJS that Component Welcome passed in, and finally render the code: Hello, ReactJS . It’s like a method call in javascript right?

• Do not change props : you can change props using setProps or replaceProps but are not recommended by React ( Props are Read-Only ) – React follows a rule that is a pure function: do not change the first value on and always returns a format type.

Let’s take a look at an example (I got it from the React homepage):

It can be seen that the Clock component still depends on the function tick() to update data. For the Clock component to operate independently and update itself, we will use State .

2. State

• Concept: Like props , the state stores information about the component, but dynamically stores the data of a component.
• State is dynamic data, it allows a component to track information changes between render and make it interactive.
• State can only be used in a component that generates it.
• If a component is expected to manage state, it should be created within a component class rather than a component component.

And with the above example, let’s start trying to use state instead of props

1. Thay thế this.props.date bằng this.state.date ở render() method.

2. Thêm class contructor().

3. Xóa date prop từ <Clock /> element.

It seems to be a bit wrong because Clock only updates when F5, to solve that problem, we need to add special methods called lifecycle methods , and in this example we add two functions:

• componentDidMount() : this is where we initialize the Timer
• componentWillUnmount() : this is where we clear the Timer

And finally to update the state we use this.setState() , full code:

The code will work as follows:

• Component initializes and initializes State always with date = current time
• After Compnent initializes with the state value initialized, componentDidMount will run and initialize interval and assign it to this.Timer
• After the interval runs, the State will update every second using this.setState() method this.setState()
• The changed state will raise the change event and the render will update the latest UI.
• Before we leave the page start, the componentWillUnmount() function will run and clear the interval

And we have a little comparison between state and props

Fasteners

Hopefully this article will help you understand more about props and state and what is not right for you to comment

Refer :

https://reactjs.org/docs/components-and-props.html https://reactjs.org/docs/state-and-lifecycle.html https://lucybain.com/blog/2016/react-state- vs-pros /

https://www.agiliq.com/blog/2018/05/understanding-react-state-and-props/