What Is State and How Is It Different From Props?

Every React Native application is created to display some sort of data. It can be weather data, images, market data, maps, and so on. Using React Native, we manage how this data is displayed on our users’ screens. React Native offers robust tools for styling and animating content. However, in this course, we are concentrating on the raw material of data used in the app.

State

In order to have a dynamic piece of data existing automagically in sync with our component, we need to declare the list as a component state.

Note: The most important thing to remember about state is that it is managed within the component; it is the component memory.

Any changes in state will cause our component and all its children to rerender. This is an expected behavior: if our data changes, we want our UI to change as well. However, multiple component re-renders may cause our app to encounter performance issues.

Example of a state

Let’s look at an example to better understand state. We will start off with a very basic component containing a <Text> element and a <Pressable> element. <Pressable> is the recommended component to use in React Native applications in places where a web developer would use a <button> tag: