State Management in React Native: useState vs Redux vs Zustand
Comparing local, global, and lightweight state tools in React Native
Every React Native app eventually runs into the same question: where should this piece of state live? A user's login status, a shopping cart, or a theme preference often needs to be read by screens that aren't directly related to each other, and that's where local component state starts to fall short.
In this guide, we'll compare three approaches you'll run into constantly — useState, Redux, and Zustand — and look at when each one actually makes sense.
Local state vs global state
Local state lives inside a single component and disappears once that component unmounts. Global state lives outside any one screen and can be read or updated from anywhere in the app. The mistake most beginners make is reaching for global state before they need it, which adds complexity without any real benefit.
A good rule of thumb: keep state as local as possible, and only lift it up when two or more distant components genuinely need to share it.
When useState is enough
For state that belongs to a single screen — a form's input values, a toggle, a loading flag — useState is usually the right tool. There's no setup cost, and it keeps the logic close to where it's used.
function LoginScreen() {
const [email, setEmail] = useState('');
const [loading, setLoading] = useState(false);
const handleSubmit = async () => {
setLoading(true);
await loginUser(email);
setLoading(false);
};
return (
<TextInput value={email} onChangeText={setEmail} />
);
}If you find yourself passing the same state through four or five levels of props just to reach a distant child, that's usually the signal it's time to consider a global store.
Adding Redux for shared state
Redux Toolkit is still the most common choice for larger apps with complex, interconnected state — things like an authenticated user, a cart, or cached API data used across many screens.
import { createSlice, configureStore } from '@reduxjs/toolkit';
const cartSlice = createSlice({
name: 'cart',
initialState: { items: [] },
reducers: {
addItem: (state, action) => {
state.items.push(action.payload);
},
},
});
export const { addItem } = cartSlice.actions;
export const store = configureStore({
reducer: { cart: cartSlice.reducer },
});The trade-off is boilerplate: actions, reducers, and a provider wrapping your app. It pays off once your state logic grows complex enough to need predictable, testable updates.
A lighter option: Zustand
Zustand has become popular in the React Native community for apps that want global state without Redux's ceremony. A store is just a hook:
import { create } from 'zustand';
const useCartStore = create((set) => ({
items: [],
addItem: (item) =>
set((state) => ({ items: [...state.items, item] })),
}));
// Inside any component
const items = useCartStore((state) => state.items);
const addItem = useCartStore((state) => state.addItem);No providers, no action types, no reducers — just a store you import and use directly. For small to mid-sized apps, this is often enough to replace Redux entirely.
Which one should you choose?
- useState — for state that belongs to one screen or component
- Redux Toolkit — for large apps with complex, shared state and a need for strict structure
- Zustand — for apps that want global state with minimal setup and boilerplate
There's no single right answer here — it depends on your app's size and how your team likes to structure code. Many teams start with useState and Context, then reach for Zustand or Redux only once the app's state genuinely outgrows them.
