Efficiently Persisting State in React Native with Recoil and react-native-mmkv

Introduction

Recoil has gained traction as a state management library for React. However, there are various methods to persist its state. In this article, we'll explore how to efficiently persist Recoil's state using react-native-mmkv, a fast key-value storage.

Installing Necessary Packages

First, let's install the required packages:

yarn add recoil react-native-mmkv

Then, link the native part of react-native-mmkv:

expo install react-native-mmkv

Creating a Persistence Helper for Recoil

Next, we'll create a helper function to persist the state of Recoil's atoms and selectors using react-native-mmkv.

import MMKV from 'react-native-mmkv';
import { atom, DefaultValue } from 'recoil';

export const persistentAtom = <T>(key: string, defaultVal: T) => {
  return atom<T>({
    key,
    default: defaultVal,
    effects_UNSTABLE: [
      ({ setSelf, onSet }) => {
        const savedValue = MMKV.getString(key);

        if (savedValue != null) {
          setSelf(JSON.parse(savedValue));
        }

        onSet((newValue) => {
          if (newValue instanceof DefaultValue) {
            MMKV.delete(key);
          } else {
            MMKV.set(key, JSON.stringify(newValue));
          }
        });
      },
    ],
  });
};

Using the Persistent Atom

Now, let's create a persisted atom using the helper function:

import { persistentAtom } from './path-to-your-helper';

export const userState = persistentAtom('userState', {
  name: '',
  age: 0,
});

Using in Your Application

You can use this persisted atom in your application just like any regular Recoil atom:

import { useRecoilState } from 'recoil';
import { userState } from './path-to-your-atom';

const UserInfo = () => {
  const [user, setUser] = useRecoilState(userState);

  return (
    <View>
      <Text>Name: {user.name}</Text>
      <Text>Age: {user.age}</Text>
    </View>
  );
};

Conclusion

Combining Recoil with react-native-mmkv allows for efficient state persistence in React Native applications. This combination is ideal for maintaining application performance while securely storing user data.

---

If you found this article helpful, please give it a thumbs up or leave a comment. Any questions or feedback are also welcome! 🚀