☞ Should we use Global State?

Nikhil Saxena — Tue, 11 Apr 2023 17:54:40 +0000

When you’re building React Native apps, you gotta think about state management, right? There are a few ways to do it, but one of the most popular is global state. In this blog post, we’ll talk about what global state is, whether it’s the best option for your app, and how to use it.

What is Global State?

So, global state is just a single state object that you can access and change from any component in your app. This means that you can keep track of everything in one place and make sure that everyone is on the same page.

It’s super easy to create global state in React Native using the Context API. Here’s an example:

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

export const GlobalContext = createContext();

export const GlobalProvider = ({ children }) => {
  const [state, setState] = useState({});

  return (
    <GlobalContext.Provider value={[state, setState]}>
      {children}
    </GlobalContext.Provider>
  );
};

In this code, we’re making a GlobalProvider component that wraps everything in our app. We create a GlobalContext object with createContext, set an empty object as the initial state with useState, and then make that state available to all of our components with GlobalContext.Provider.

Pros and Cons of Global State

So, there are some pretty sweet things about global state:

Easy to Use: Global state is super simple to use — you can access it from anywhere in your app!
Saves Time: Using global state can save you time by avoiding having to pass state down through multiple components.

But, there are some downsides, too:

Easy to Misuse: It’s really easy to use global state too much, which can make your code hard to keep track of.
Performance Issues: If your state object gets too big or too many components are using it at once, your app might slow down.

When to Use Global State

So, when should you use global state? Here are a few examples:

User Authentication: If you need to keep track of whether someone is logged in across your whole app, global state is a good way to do it.
Theme Settings: If you want to let your users switch between light and dark mode, global state can make it easy.
API Responses: If you want to cache responses from your server and use them in multiple parts of your app, global state is a good choice.

Managing Global State

When you’re using global state, it’s important to keep everything organised. You can use the useContext hook to access the global state from any component in your app.

Here’s an example:

import React, { useContext } from 'react';
import { View, Text } from "react-native"; 
import { GlobalContext } from './GlobalState';

export const MyComponent = () => {
  const [state, setState] = useContext(GlobalContext);

  const handlePress = () => {
    setState({ ...state, someValue: true });
  }

  return (
    <View>
      <Text>{state.someValue}</Text>
      <Button onPress={handlePress}>Update State</Button>
    </View>
  )
}

In this code, we’re importing the GlobalContext object and using useContext to get the state and setState values. Then, we just use those values like we would any other state.

Final Words