This video is available to students only

Introduction

State Management in React Native has similar options to React.

Prerequisites#

It is highly recommended that you go through the lessons of Module 1 - Getting Started before proceeding with any other module. They build up to the type of learning we are trying to achieve here, and lay the foundation for this entire course.


State management#

State Management in React Native has similar options to React.

There are two types of data that control a component: props and state. Props are what is passed by the parent component, and they do not change throughout the lifetime of a component. For a component's internal changes, we have state.

In general, state is initialized in the constructor, and then setState is called whenever we want to change it.

When using a brownfield approach (integrating React Native to an existing native app), apps tend to manage React Native's state too on the native side. I do not think this is advisable. It would mean going through the bridge for every operation that needs to be performed on the state, which would require lots of serialization and deserialization, and so the process is not optimal.

We should try and keep a React Native application's state in JavaScript. If something needs to be sent to native, we should make sure that we do not need to wait for a callback from the native to continue.

Class components#

Class components have a built in state object. These can be used to store data used by class while the component is mounted (not necessarily in view). These are generally initialized in the constructors, but that is not a necessity.

setState is used to tell React that there has been a change in the component's state and that it should be re-rendered. This operation is async and we can access the previous value of state before changes are made to it.

It also accepts a second function as a callback. This is executed after the state has been updated.

Start a new discussion. All notification go to the author.