What Is State and How Is It Different From Props?
Explore the concepts of state and props in React Native. Understand how state manages dynamic data within components and triggers re-rendering, while props allow data to be passed read-only from parent to child components. Gain practical knowledge of using the useState hook and how to implement state changes and data flow in a simple React Native app.
We'll cover the following...
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:
As we can probably ...