If you have been learning React/React Native you would have come across ‘props’ and ‘state’ being used all over the code. So what exactly are these and how do we use them for their intended purpose?

When I started coding React Native with no prior knowledge of React, it took me a while to understand these two concepts clearly. Let me try to simplify this for you all.

Props and State are the two types of data that control a component.

Props

Props are short for Properties. The simple rule of thumb is props should not be changed. In the programming world we call it “Immutable” or in simple english “Unchangeable”.

Props are Unchangeable — Immutable

Components receive props from their parent. These props should not be modified inside the component. In React and React Native the data flows in one direction -> From the parent to the child.

You can write your own components that use props. The idea behind props is that you can make a single component that is used in many different places in your app. The parent that is calling the component can set the properties, which could be different in each place.

Props essentially help you write reusable code.

This simple example shows how props are used.

In the example above we have a Heading component, with a message prop. The parent class ScreenOne sends the prop to the child component Heading.

Notice that the same component Heading can be reused several times with different message prop values passed to it from different parents components. The key here is to remember that the prop should not be modified inside the Heading component.

You can create as many screens as you would like to include the same Heading component with different message props.

State

State works differently when compared to props. State is internal to a component, while props are passed to a component.

State can Change — Mutable

In english the ‘state of a being’ refers to the physical condition of a person, and it is a mere state, which changes over time. Well, similarly state in React/React Native is used within components to keep track of information.

Keep in mind not to update state directly using this.state. Always use setState to update the state objects. Using setState re-renders the component and all the child components. This is great, because you don’t have to worry about writing event handlers like other languages.

So when can state be used?

Anytime there is data that is going to change within a component, state can be used.

User interaction with components are good examples of how state works. Clicking buttons, checkboxes, filling forms, etc. are examples of user interaction where state can be used within the component.

If you had to fill a form with text inputs, each field in the form will retain it’s state based on the user input. If the user input changes, the state of the text inputs will change, causing a re-rendering of the component and all of it’s child components.

Take a look at the code snippet below to better understand how states works within a form.

In the above code snippet you can see a Form class with an input state. It renders a text input which accepts the user’s input. Once the user inputs the text, the onChangeText is triggered which in turn calls setState on input.

The setState triggers a re-rendering of the component again, and the UI is now updated with the user’s latest input. This simple example illustrates how state within a component can be updated and its usage.

If you don’t want the component to re-render with the state changes, the shouldComponentUpdate() lifecycle method can be used. This is a topic we can dive into in my future posts.

I am Adhithi Ravichandran a Software Consultant working on React Native Apps. I am also a Pluralsight Author and love teaching. You can checkout my latest course on React Native from pluralsight below:

https://www.pluralsight.com/courses/react-native-big-picture

For more information and posts from me visit http://adhithiravichandran.com/ and follow me on twitter @AdhithiRavi.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.