After getting the complete understanding of between functional and class components in React Native: Components. Let’s discuss Props and State in detail.
Props and State are the two kinds of data that control a component.
Props are short for Properties. The general rule of thumb is props ought not to be changed. In the world of programming, we call it “Immutable”.
Props are Unchangeable — Immutable.
Components accept props from their parents. These props should not be changed inside the component. In React and React Native the data streams in one direction -> From the parent to the child. You can compose your components that use props. The idea behind props is that you can create a single component that is used in many places in your application. The parent that is calling the component can set the properties, which could be different or changed in each place according to requirement.
This simple example demonstrates how props are used.
In the example shown above, we have a MyData component, with a name prop. The parent class directs the prop to the child MyData Heading.
Notice that the similar component MyData can be reused many times with various name prop values passed to it from various parents’ components. The key here is to keep in mind that the prop should not be modified inside the MyData component.
You can make as many screens as you would like to incorporate the same MyData component with various name props.
State works differently when contrasted with props. The state is internal to a component, whereas props are passed to a component.
The state can Change — Mutable
State in React/React Native is used inside components to keep track of information.
Remember not to bring up to date state directly using this.state. Always use setState to bring up to date the state objects. Using setState re-renders the component and all the child components. This is good because you don’t need to stress over writing event handlers like other languages.
So, when can the state be used?
Whenever there is data that is going to change inside a component, the state can be used.
User interaction with components is good examples to understand how the state works. Some of the examples of user interaction are clicking buttons, checkboxes, filling forms, etc. where the state can be used inside the component.
If you have to fill in a form with text inputs, each field in the form will hold its state based on the user input. If the user input changes, it will change the text inputs of the state, causing a re-rendering of the component and all of its child components.
Take a look at the part of the code below to better understand how states work inside a changing text.
In the above piece of code, you can see a name with a text state. It renders a text which accepts the client’s click button. Once the user clicks the button, the onChangeText is activated which in turn calls setState.
The setState activates a re-rendering of the component again, and the user interface (UI) is now updated with the user’s most recent text. This simple example shows how the state within a component can be updated and its usage.