State Management in React Native with Expo: A Beginner’s Guide

- February 24, 2025

State management is an essential part of building scalable and maintainable React Native applications. In this guide, we will explore different ways to manage state in a React Native Expo project, from using the built-in useState hook to more advanced solutions like Context API and Redux.

1. Understanding State in React Native

State represents the dynamic data in your application. React provides the useState hook to manage state within functional components.

Using `useState` Hook

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Pros:

Simple and built into React.
Great for managing component-level state.

2. Using Context API for Global State

The Context API allows you to share state across multiple components without prop drilling.

Creating a Context Provider

import React, { createContext, useState } from 'react';

export const AppContext = createContext();

export const AppProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <AppContext.Provider value={{ user, setUser }}>
      {children}
    </AppContext.Provider>
  );
};

Using Context in a Component

import React, { useContext } from 'react';
import { View, Text, Button } from 'react-native';
import { AppContext } from '../context/AppContext';

export default function Profile() {
  const { user, setUser } = useContext(AppContext);

  return (
    <View>
      <Text>User: {user ? user.name : 'Guest'}</Text>
      <Button title="Login" onPress={() => setUser({ name: 'John Doe' })} />
    </View>
  );
}

Pros:

Good for small to medium applications.
Eliminates prop drilling.

3. Managing State with Redux

Redux is a powerful library for managing global state in large applications.

Install Redux and React-Redux

npm install @reduxjs/toolkit react-redux

Setting Up Redux Store

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
  }
});

export const { increment } = counterSlice.actions;
const store = configureStore({ reducer: { counter: counterSlice.reducer } });

export default function App() {
  return (
    <Provider store={store}>
      {/* Your App Components */}
    </Provider>
  );
}

Using Redux in a Component

import { useSelector, useDispatch } from 'react-redux';
import { increment } from '../store';
import { View, Text, Button } from 'react-native';

export default function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => dispatch(increment())} />
    </View>
  );
}

Pros:

Great for large applications with complex state logic.
Centralized state management.

Conclusion

Choosing the right state management approach depends on your project’s complexity. For small apps, useState is sufficient. The Context API is excellent for medium-sized apps, while Redux is ideal for large-scale applications requiring structured state management.

Start experimenting with different approaches and choose what best fits your app! 🚀

@UgxCode

UgxCode