React Native State – Learn How to Manage State

React Native State

This post will help you to Learn How to Manage State in React Native. Components are the UI that helps to design your imagination but the real data in the app is managed by State and Props. Here is an example of React Native State.

Props and State in React Native

Props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use State.

React provides so many different hooks which is very useful for the day to day development. To manage State React provides useState hook which will help you to get/set state. Managing State is very easy and tricky at the same time. As it depends on you how to use it.

Let’s take an example

We have two texts and the value of the text is just some numbers. The numbers are increasing and decreasing every second. To perform this action in other languages

• We have to manage the variables which will store the value that should be printed, every second
• We have to increase or decrease the value and then we have to set the variable on the text.

But in the case of React, we bind the state of variables with each text and in every second we just set the state which will result in the re-render of the view.

UseState Hook

If we talk about useState hook you can simply import it from react using

import React, {useState} from 'react';

Once you Import the useState hook you need to define state variable and setState function like this

const [valx, setValx] = useState(0);

You can see we have passed some value in useState which means you can set any default value for that state while initialisation.

Once you have your State defined you can use valx anywhere and whenever you want to change the value of valx just set the value using setValx(‘Some Value’) which will automatically update the value of valx and view will re-render to reflect it’s value in front end.

Code

Here is the example to manage State in React Native

App.js

// React Native State – Learn How to Manage State
// https://aboutreact.com/react-native-state/

// import React in our code
import React, {useState, useEffect} from 'react';

// import all the components we are going to use
import {SafeAreaView, Text, View} from 'react-native';

const App = () => {
  const [valx, setValx] = useState(0);
  const [valy, setValy] = useState(100000000000);

  useEffect(() => {
    const myInterval = setInterval(() => {
      setValx((val) => val + 1);
      setValy((val) => val - 1);
    }, 1000);
    return () => clearInterval(myInterval);
  }, []);

  return (
    <SafeAreaView>
      <View>
        {/*
          Text Component will be re-render every time,
          when state changes.
         */}
        <Text>
          {/* valx will change in every second*/}
          {'Hello I am valx. I am increasing ' + valx}
        </Text>

        <Text>
          {/* valy will change in every second*/}
          {'Hello I am valy. I am decreasing ' + valy}
        </Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

Output Screenshot

Output in Online Emulator

Another example can be an Activity Indicator (Loader) which will be needed while doing some networking tasks to block the screen. You can manage the visibility of form and Activity Indicator with the help state. As the visibility should be bind with the isLoading variable and whenever you perform a network task It should be changed to true which will hide the form and will show the Activity Indicator and vice-versa.

That was the React Native State. If you have any doubts or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂