How to manage state in Expo apps? What are the recommended solutions?

State management in Expo apps is an important architectural decision that requires choosing the right solution based on project scale, team experience, and performance requirements. Expo itself doesn't provide specific state management libraries, but supports all React Native state management solutions.

Mainstream State Management Solutions:

1. React Context + Hooks

Suitable for small to medium-sized apps, simple and direct.

Implementation Example:

typescript
// Context creation
const AppContext = createContext();

// Provider component
export function AppProvider({ children }) {
  const [state, setState] = useState(initialState);

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

// Use Context
function MyComponent() {
  const { state, setState } = useContext(AppContext);
  return <Text>{state.value}</Text>;
}

Pros:

• No additional dependencies
• Simple and easy to use
• Good performance (with useMemo and useCallback)

Cons:

• May cause performance issues in large apps
• Lacks middleware support
• Limited debugging tools

1. Redux Toolkit

Suitable for medium to large apps, provides complete ecosystem.

Installation and Configuration:

bash
npm install @reduxjs/toolkit react-redux

Implementation Example:

typescript
// Create slice
import { createSlice } from '@reduxjs/toolkit';

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

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

// Configure store
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

// Use in Expo
import { Provider } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      <RootNavigator />
    </Provider>
  );
}

Pros:

• Powerful middleware support
• Excellent debugging tools (Redux DevTools)
• Time travel debugging
• Rich ecosystem

Cons:

• Steep learning curve
• More boilerplate code
• May be over-engineered for small apps

1. Zustand

Lightweight state management library with simple API.

Installation and Configuration:

bash
npm install zustand

Implementation Example:

typescript
import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// Use in component
function Counter() {
  const { count, increment, decrement } = useStore();
  return (
    <View>
      <Text>{count}</Text>
      <Button title="+" onPress={increment} />
      <Button title="-" onPress={decrement} />
    </View>
  );
}

Pros:

• Simple API
• No Provider needed
• Excellent performance
• Good TypeScript support

Cons:

• Smaller ecosystem
• Limited middleware support

1. Jotai

Atom-based state management, flexible and high-performance.

Installation and Configuration:

bash
npm install jotai

Implementation Example:

typescript
import { atom, useAtom } from 'jotai';

// Create atom
const countAtom = atom(0);
const doubledAtom = atom((get) => get(countAtom) * 2);

// Use in component
function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubled] = useAtom(doubledAtom);

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

Pros:

• Fine-grained updates
• No Provider needed
• High performance
• Flexible composition

Cons:

• Relatively new
• Learning curve

1. Recoil

Experimental state management library developed by Facebook.

Installation and Configuration:

bash
npm install recoil

Implementation Example:

typescript
import { atom, useRecoilState, useRecoilValue } from 'recoil';

// Create atom
const countState = atom({
  key: 'countState',
  default: 0,
});

// Use in component
function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Selection Recommendations:

1. Small Apps: React Context + Hooks

   • Simple and direct
   • No additional dependencies
   • Fast development

2. Medium Apps: Zustand or Jotai

   • Lightweight
   • Simple API
   • Excellent performance

3. Large Apps: Redux Toolkit

   • Complete ecosystem
   • Powerful debugging tools
   • Team collaboration friendly

4. Need Fine-grained Control: Jotai or Recoil

   • Atomic state
   • Precise updates
   • High performance

Best Practices:

1. Choose as Needed: Select appropriate solution based on project requirements
2. Keep Simple: Don't over-engineer
3. TypeScript Support: Prioritize libraries with good TypeScript support
4. Performance Optimization: Use useMemo, useCallback to optimize rendering
5. Persistence: Consider using AsyncStorage or expo-secure-store for state persistence

Persistence Solutions:

typescript
// Use expo-secure-store
import * as SecureStore from 'expo-secure-store';

// Save state
await SecureStore.setItemAsync('userState', JSON.stringify(userState));

// Restore state
const savedState = await SecureStore.getItemAsync('userState');
if (savedState) {
  const userState = JSON.parse(savedState);
  // Restore to state management library
}

Choosing the right state management solution is a key decision in Expo app architecture, requiring comprehensive consideration of project needs, team skills, and long-term maintenance costs.