Γιατί Χρειάζεστε Σωστή Διαχείριση Κατάστασης στο React Native
Αν έχετε δουλέψει αρκετά με React Native, σίγουρα έχετε νιώσει εκείνο το σημείο καμπής. Στην αρχή, το useState και το useContext φαίνονται υπεραρκετά. Γράφετε κώδικα, τα πράγματα δουλεύουν, η ζωή είναι ωραία.
Και μετά η εφαρμογή μεγαλώνει. Πολλές οθόνες, API calls παντού, authentication, offline λειτουργικότητα — και ξαφνικά βρίσκεστε σε ένα χάος από prop drilling και περίεργα re-renders. Ξέρω το αίσθημα γιατί το έχω ζήσει αρκετές φορές.
Λοιπόν, ας μιλήσουμε για τη λύση. Το 2026, η κοινότητα του React Native έχει στρέψει σοβαρά την προσοχή της στο Zustand — μια ελαφριά, hook-based βιβλιοθήκη διαχείρισης κατάστασης που ζυγίζει μόλις ~1KB (gzipped) και προσφέρει εκπληκτική απόδοση σε κινητές συσκευές. Σε αυτόν τον οδηγό, θα δούμε τα πάντα: από τη βασική εγκατάσταση μέχρι advanced patterns όπως persist middleware με MMKV, selectors για βελτιστοποίηση rendering, και TypeScript ολοκλήρωση.
Τι Είναι το Zustand και Γιατί Ξεχωρίζει
Το Zustand (γερμανική λέξη για "κατάσταση" — ναι, οι Γερμανοί έχουν λέξη για τα πάντα) είναι μια μινιμαλιστική βιβλιοθήκη διαχείρισης κατάστασης, δημιουργημένη από την ομάδα pmndrs (οι ίδιοι πίσω από το React Three Fiber και το React Spring). Σε αντίθεση με το Redux ή το MobX, το Zustand ακολουθεί μια ριζικά απλή προσέγγιση: χρησιμοποιεί hooks, δεν χρειάζεται providers, δεν έχει actions ή reducers, και ολόκληρο το API μπορεί να μαθευτεί σε λιγότερο από 15 λεπτά.
Ειλικρινά, όταν το δοκίμασα πρώτη φορά, νόμιζα ότι κάτι μου διέφευγε. Ήταν τόσο απλό.
Τα Βασικά Πλεονεκτήματα
- Ελάχιστο μέγεθος bundle: Μόλις ~1KB gzipped, σε σύγκριση με τα ~15KB του Redux Toolkit (με react-redux). Σε mobile εφαρμογές, κάθε kilobyte μετράει — και αυτό δεν είναι υπερβολή.
- Κανένα Provider: Δεν χρειάζεται να τυλίξετε την εφαρμογή σας σε context providers. Αυτό εξαλείφει περιττά re-renders και απλοποιεί δραματικά το component tree.
- Hook-based API: Καλείτε απλά ένα hook για να αποκτήσετε πρόσβαση στο state — χωρίς connect functions, mapStateToProps, ή dispatch calls.
- Εξαιρετικό TypeScript support: First-class υποστήριξη χωρίς πρόσθετη ρύθμιση ή περίεργα workarounds.
- Smart selectors: Τα components κάνουν re-render μόνο όταν αλλάζει το συγκεκριμένο κομμάτι state που παρακολουθούν. Αυτό κάνει τεράστια διαφορά στην απόδοση.
- Πλήρης συμβατότητα: Δουλεύει άψογα με Hermes, Fabric, και τη Νέα Αρχιτεκτονική του React Native.
Εγκατάσταση και Ρύθμιση με Expo SDK 53
Το Expo SDK 53 περιλαμβάνει React Native 0.79 και React 19, με τη Νέα Αρχιτεκτονική ενεργοποιημένη από προεπιλογή. Καλά νέα: το Zustand, ως pure JavaScript βιβλιοθήκη χωρίς native modules, λειτουργεί τέλεια σε αυτό το περιβάλλον χωρίς κανένα πρόβλημα.
Βήμα 1: Δημιουργία Νέου Expo Project
npx create-expo-app@latest MyZustandApp
cd MyZustandAppΒήμα 2: Εγκατάσταση Zustand
npm install zustandΑυτό ήταν. Σοβαρά. Δεν χρειάζονται πρόσθετα πακέτα, providers, ή ρυθμίσεις. Η τελευταία σταθερή έκδοση είναι η 5.0.11.
Βήμα 3: Επαλήθευση Συμβατότητας
npx expo-doctorΤρέξτε αυτό για να σιγουρευτείτε ότι δεν υπάρχουν θέματα συμβατότητας με τη Νέα Αρχιτεκτονική και το React 19.
Δημιουργία του Πρώτου Store
Ωραία, ας περάσουμε στην πράξη. Θα φτιάξουμε ένα πρακτικό παράδειγμα — ένα store για εφαρμογή διαχείρισης εργασιών (todo app) με πλήρες TypeScript support.
Ορισμός Τύπων και Store
// src/stores/useTodoStore.ts
import { create } from 'zustand';
interface Todo {
id: number;
text: string;
completed: boolean;
createdAt: Date;
}
interface TodoState {
todos: Todo[];
filter: 'all' | 'active' | 'completed';
addTodo: (text: string) => void;
toggleTodo: (id: number) => void;
removeTodo: (id: number) => void;
setFilter: (filter: 'all' | 'active' | 'completed') => void;
clearCompleted: () => void;
}
export const useTodoStore = create<TodoState>((set) => ({
todos: [],
filter: 'all',
addTodo: (text) =>
set((state) => ({
todos: [
...state.todos,
{
id: Date.now(),
text,
completed: false,
createdAt: new Date(),
},
],
})),
toggleTodo: (id) =>
set((state) => ({
todos: state.todos.map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
),
})),
removeTodo: (id) =>
set((state) => ({
todos: state.todos.filter((todo) => todo.id !== id),
})),
setFilter: (filter) => set({ filter }),
clearCompleted: () =>
set((state) => ({
todos: state.todos.filter((todo) => !todo.completed),
})),
}));Δείτε πόσο καθαρός είναι ο κώδικας. Ορίζουμε το state και τις μεθόδους ενημέρωσής του σε ένα μόνο αρχείο, χωρίς καθόλου boilerplate. Αν έχετε δουλέψει με Redux στο παρελθόν, αυτή η απλότητα νιώθεται σχεδόν σαν ανακούφιση. Η συνάρτηση set χρησιμοποιεί immutable updates — δημιουργεί νέα αντικείμενα αντί να μεταλλάσσει τα υπάρχοντα.
Χρήση του Store σε Component
// src/components/TodoList.tsx
import React, { useState } from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
FlatList,
StyleSheet,
} from 'react-native';
import { useTodoStore } from '../stores/useTodoStore';
export function TodoList() {
const [input, setInput] = useState('');
const todos = useTodoStore((state) => state.todos);
const filter = useTodoStore((state) => state.filter);
const addTodo = useTodoStore((state) => state.addTodo);
const toggleTodo = useTodoStore((state) => state.toggleTodo);
const removeTodo = useTodoStore((state) => state.removeTodo);
const filteredTodos = todos.filter((todo) => {
if (filter === 'active') return !todo.completed;
if (filter === 'completed') return todo.completed;
return true;
});
const handleAdd = () => {
if (input.trim()) {
addTodo(input.trim());
setInput('');
}
};
return (
<View style={styles.container}>
<View style={styles.inputRow}>
<TextInput
style={styles.input}
value={input}
onChangeText={setInput}
placeholder="Προσθέστε νέα εργασία..."
onSubmitEditing={handleAdd}
/>
<TouchableOpacity style={styles.addButton} onPress={handleAdd}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</View>
<FlatList
data={filteredTodos}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<TouchableOpacity
style={styles.todoItem}
onPress={() => toggleTodo(item.id)}
onLongPress={() => removeTodo(item.id)}
>
<Text
style={[
styles.todoText,
item.completed && styles.completedText,
]}
>
{item.text}
</Text>
</TouchableOpacity>
)}
/>
</View>
);
}Κάτι πολύ σημαντικό εδώ: προσέξτε ότι χρησιμοποιούμε selectors — δηλαδή useTodoStore((state) => state.todos) αντί για σκέτο useTodoStore(). Αυτό δεν είναι απλά "καλή πρακτική", είναι κρίσιμο. Χωρίς selector, το component θα κάνει re-render σε κάθε αλλαγή του store, ακόμα κι αν αυτή η αλλαγή δεν το αφορά καθόλου.
Selectors: Η Μυστική Υπερδύναμη του Zustand
Αν θα πάρετε μόνο ένα πράγμα από αυτόν τον οδηγό, ας είναι αυτό: οι selectors είναι ό,τι κάνει το Zustand τόσο αποδοτικό στο React Native.
Σκεφτείτε το εξής: με το Context API, κάθε αλλαγή στο context προκαλεί re-render σε όλα τα components που το χρησιμοποιούν. Σε μια εφαρμογή με 50+ components, αυτό γίνεται πρόβλημα γρήγορα. Το Zustand, αντίθετα, re-renders μόνο τα components που έχουν εγγραφεί στο συγκεκριμένο κομμάτι state που πραγματικά άλλαξε.
Βασικοί Selectors
// Κάθε ένα από αυτά προκαλεί re-render ΜΟΝΟ
// όταν αλλάζει η αντίστοιχη τιμή
const todos = useTodoStore((state) => state.todos);
const filter = useTodoStore((state) => state.filter);
const addTodo = useTodoStore((state) => state.addTodo);Derived Selectors (Παράγωγα)
// Computed τιμές μέσα στον selector
const activeTodoCount = useTodoStore(
(state) => state.todos.filter((t) => !t.completed).length
);
const hasCompletedTodos = useTodoStore(
(state) => state.todos.some((t) => t.completed)
);Shallow Comparison για Πολλαπλές Τιμές
import { useShallow } from 'zustand/shallow';
// Αντί να καλέσετε τον hook πολλές φορές,
// μπορείτε να πάρετε πολλές τιμές μαζί
const { todos, filter } = useTodoStore(
useShallow((state) => ({
todos: state.todos,
filter: state.filter,
}))
);Το useShallow κάνει shallow comparison αντί για reference equality. Χωρίς αυτό, κάθε φορά που καλείται ο selector, δημιουργεί ένα νέο αντικείμενο (ακόμα κι αν οι τιμές είναι ίδιες), κι αυτό σημαίνει περιττά re-renders. Μικρή λεπτομέρεια, μεγάλη διαφορά.
Persist Middleware: Αποθήκευση State στη Συσκευή
Σε mobile εφαρμογές, η αποθήκευση state μεταξύ sessions δεν είναι πολυτέλεια — είναι ανάγκη. Authentication tokens, ρυθμίσεις χρήστη, cached δεδομένα... αν ο χρήστης κλείσει την εφαρμογή και τα χάσει όλα, δεν θα είναι χαρούμενος. Ευτυχώς, το Zustand προσφέρει ενσωματωμένο persist middleware που κάνει αυτή τη δουλειά πανεύκολα.
Persist με AsyncStorage
npx expo install @react-native-async-storage/async-storage// src/stores/useSettingsStore.ts
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
interface SettingsState {
theme: 'light' | 'dark';
language: string;
notificationsEnabled: boolean;
setTheme: (theme: 'light' | 'dark') => void;
setLanguage: (language: string) => void;
toggleNotifications: () => void;
}
export const useSettingsStore = create<SettingsState>()(
persist(
(set) => ({
theme: 'light',
language: 'el',
notificationsEnabled: true,
setTheme: (theme) => set({ theme }),
setLanguage: (language) => set({ language }),
toggleNotifications: () =>
set((state) => ({
notificationsEnabled: !state.notificationsEnabled,
})),
}),
{
name: 'settings-storage',
storage: createJSONStorage(() => AsyncStorage),
}
)
);Κι αυτό ήταν — κυριολεκτικά. Κάθε αλλαγή στο store αποθηκεύεται αυτόματα στο AsyncStorage, και κατά την εκκίνηση της εφαρμογής, τα δεδομένα ανακτώνται αυτόματα (hydration). Δεν χρειάζεται να γράψετε ούτε μία γραμμή παραπάνω.
Persist με MMKV: 30x Ταχύτερη Αποθήκευση
Τώρα, αν θέλετε να πάτε ένα βήμα παραπέρα (και πιστέψτε με, αξίζει), το react-native-mmkv είναι η καλύτερη επιλογή. Μιλάμε για περίπου 30 φορές ταχύτερο από το AsyncStorage, με υποστήριξη κρυπτογράφησης. Η διαφορά είναι αισθητή, ιδιαίτερα σε παλιότερες συσκευές.
npm install react-native-mmkv// src/storage/mmkvStorage.ts
import { MMKV } from 'react-native-mmkv';
import { StateStorage } from 'zustand/middleware';
export const mmkv = new MMKV({
id: 'app-storage',
});
export const mmkvStorage: StateStorage = {
setItem: (name, value) => mmkv.set(name, value),
getItem: (name) => mmkv.getString(name) ?? null,
removeItem: (name) => mmkv.delete(name),
};// src/stores/useAuthStore.ts
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { mmkvStorage } from '../storage/mmkvStorage';
interface AuthState {
token: string | null;
user: { id: string; name: string; email: string } | null;
isAuthenticated: boolean;
login: (token: string, user: AuthState['user']) => void;
logout: () => void;
}
export const useAuthStore = create<AuthState>()(
persist(
(set) => ({
token: null,
user: null,
isAuthenticated: false,
login: (token, user) =>
set({ token, user, isAuthenticated: true }),
logout: () =>
set({ token: null, user: null, isAuthenticated: false }),
}),
{
name: 'auth-storage',
storage: createJSONStorage(() => mmkvStorage),
partialize: (state) => ({
token: state.token,
user: state.user,
isAuthenticated: state.isAuthenticated,
}),
}
)
);Η παράμετρος partialize εδώ είναι πολύ χρήσιμη: σας επιτρέπει να αποθηκεύετε μόνο τα πεδία που πραγματικά χρειάζεστε. Μέθοδοι, προσωρινά flags, UI state — όλα αυτά δεν χρειάζεται να πάνε στο storage.
Hydration: Τι Γίνεται Όταν η Εφαρμογή Ξεκινάει
Εδώ υπάρχει ένα gotcha που πιάνει πολλούς developers. Όταν η εφαρμογή ξεκινά, το persist middleware χρειάζεται λίγο χρόνο για να φορτώσει τα αποθηκευμένα δεδομένα από το storage. Αυτή η διαδικασία ονομάζεται hydration.
Αν δεν το χειριστείτε σωστά, θα δείτε ένα ενοχλητικό "flicker" στο UI — για ένα κλάσμα του δευτερολέπτου, η εφαρμογή δείχνει τις default τιμές πριν εμφανιστούν τα πραγματικά δεδομένα.
// Προσθήκη hydration tracking στο store
interface AuthState {
// ... τα υπόλοιπα πεδία
hasHydrated: boolean;
setHasHydrated: (value: boolean) => void;
}
export const useAuthStore = create<AuthState>()(
persist(
(set) => ({
// ... τα υπόλοιπα
hasHydrated: false,
setHasHydrated: (value) => set({ hasHydrated: value }),
}),
{
name: 'auth-storage',
storage: createJSONStorage(() => mmkvStorage),
onRehydrateStorage: () => (state) => {
state?.setHasHydrated(true);
},
}
)
);// Χρήση στο root component
import { useAuthStore } from './stores/useAuthStore';
function App() {
const hasHydrated = useAuthStore((state) => state.hasHydrated);
if (!hasHydrated) {
return <SplashScreen />;
}
return <MainNavigator />;
}Απλό, αλλά κάνει τεράστια διαφορά στην εμπειρία χρήστη.
Zustand vs Context API vs Redux: Πρακτική Σύγκριση
Ας σταματήσουμε τη θεωρία και ας δούμε αριθμούς. Παρακάτω βλέπετε μια σύγκριση βασισμένη σε benchmarks του 2026:
| Χαρακτηριστικό | Context API | Redux Toolkit | Zustand |
|---|---|---|---|
| Μέγεθος Bundle | 0KB (built-in) | ~15KB | ~1KB |
| Boilerplate | Μέτριο | Υψηλό | Ελάχιστο |
| Provider Απαιτείται | Ναι | Ναι | Όχι |
| Render Βελτιστοποίηση | Χειροκίνητη | Selectors | Selectors |
| Χρόνος Render (1000 components) | ~25ms | ~18ms | ~12ms |
| Χρήση Μνήμης | ~2.8MB | ~3.2MB | ~2.1MB |
| Persist Middleware | Χειροκίνητο | redux-persist | Ενσωματωμένο |
| TypeScript | Βασικό | Πολύ καλό | Εξαιρετικό |
| DevTools | React DevTools | Redux DevTools | Redux DevTools* |
* Το Zustand υποστηρίζει Redux DevTools μέσω του devtools middleware.
Οπότε, τι να διαλέξετε; Η προσωπική μου σύσταση:
- Context API: Μόνο για dependency injection (θέμα, γλώσσα, κλπ.) — μην το χρησιμοποιείτε ως full state management. Σοβαρά, αποφύγετέ το.
- Redux Toolkit: Αν δουλεύετε σε μεγάλη enterprise εφαρμογή με πολλούς developers και χρειάζεστε αυστηρά patterns. Δεν είναι κακό — απλά είναι πιο βαρύ.
- Zustand: Για σχεδόν τα πάντα. Από μικρά side projects μέχρι μεσαία-μεγάλα production apps. Είναι η βέλτιστη ισορροπία απλότητας και απόδοσης.
Χρήση Zustand Εκτός React Components
Αυτό είναι κάτι που πολλοί δεν ξέρουν (ή ξεχνάνε): μπορείτε να χρησιμοποιήσετε το Zustand store εκτός του React tree. Αυτό είναι εξαιρετικά χρήσιμο για API interceptors, navigation handlers, ή background tasks.
// Πρόσβαση στο store εκτός component
const token = useAuthStore.getState().token;
// Ενημέρωση state εκτός component
useAuthStore.getState().logout();
// Subscription σε αλλαγές
const unsubscribe = useAuthStore.subscribe(
(state) => console.log('Auth state changed:', state.isAuthenticated)
);Δείτε ένα πρακτικό παράδειγμα που χρησιμοποιώ σχεδόν σε κάθε project — ένα Axios interceptor που προσθέτει αυτόματα το auth token και κάνει logout αν λάβει 401:
// Πρακτικό παράδειγμα: Axios interceptor
import axios from 'axios';
import { useAuthStore } from '../stores/useAuthStore';
const api = axios.create({
baseURL: 'https://api.example.com',
});
api.interceptors.request.use((config) => {
const token = useAuthStore.getState().token;
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
api.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
useAuthStore.getState().logout();
}
return Promise.reject(error);
}
);Βέλτιστες Πρακτικές για React Native
Μετά από αρκετά projects με Zustand σε React Native, έχω καταλήξει σε μερικούς κανόνες που αξίζει να ακολουθήσετε.
1. Κρατήστε το State Επίπεδο (Flat)
Βαθιά ένθετο state δυσκολεύει τη διαχείριση, δημιουργεί περιττά re-renders, και γενικά κάνει τη ζωή σας δύσκολη. Προτιμήστε normalization:
// Αποφύγετε αυτό
interface BadState {
users: {
byId: {
[id: string]: {
profile: {
settings: {
theme: string;
};
};
};
};
};
}
// Προτιμήστε αυτό
interface GoodState {
users: Record<string, User>;
currentUserId: string | null;
theme: string;
}2. Χωρίστε τα Stores ανά Domain
Ένα γιγαντιαίο store με τα πάντα μέσα είναι ό,τι χειρότερο. Χωρίστε ανά τομέα λειτουργικότητας:
// stores/useAuthStore.ts → Authentication
// stores/useCartStore.ts → Καλάθι αγορών
// stores/useSettingsStore.ts → Ρυθμίσεις
// stores/useUIStore.ts → UI state (modals, toasts)Αυτό κρατάει κάθε store μικρό, εύκολο στο testing, και εύκολο στη συντήρηση.
3. Χρησιμοποιήστε Πάντα Selectors
Το είπα ήδη, αλλά αξίζει να το πω ξανά γιατί είναι τόσο σημαντικό. Ποτέ μην καλείτε useStore() χωρίς selector σε production κώδικα:
// ΜΗΝ κάνετε αυτό — re-render σε κάθε αλλαγή
const state = useCartStore();
// Κάντε αυτό — re-render μόνο όταν αλλάζει το items
const items = useCartStore((s) => s.items);4. DevTools στο Development
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
export const useCartStore = create<CartState>()(
devtools(
(set) => ({
// ... store definition
}),
{ name: 'CartStore' }
)
);Χρησιμοποιήστε πάντα το devtools middleware κατά τη διάρκεια του development. Θα σας γλιτώσει πολύ χρόνο debugging.
Συχνές Ερωτήσεις (FAQ)
Μπορώ να χρησιμοποιήσω το Zustand μαζί με το TanStack Query;
Απολύτως, και μάλιστα αυτός είναι ο συνιστώμενος συνδυασμός. Χρησιμοποιήστε TanStack Query για server state (API data, caching, pagination) και Zustand για client state (authentication, UI, ρυθμίσεις). Δεν ανταγωνίζονται μεταξύ τους — αλληλοσυμπληρώνονται τέλεια.
Υποστηρίζει το Zustand τη Νέα Αρχιτεκτονική;
Ναι, χωρίς κανένα πρόβλημα. Επειδή είναι pure JavaScript (χωρίς native modules), λειτουργεί τέλεια τόσο με Fabric και TurboModules όσο και με την παλιά αρχιτεκτονική. Στο Expo SDK 53 δεν χρειάζεται καμία πρόσθετη ρύθμιση.
Zustand ή Jotai;
Εξαρτάται. Το Zustand χρησιμοποιεί centralized stores (top-down) και είναι ιδανικό για διασυνδεδεμένο state. Το Jotai χρησιμοποιεί atomic state (bottom-up) και υπερέχει σε fine-grained reactivity. Για τα περισσότερα React Native projects, θα πρότεινα Zustand λόγω απλότητας. Αλλά μπορείτε ακόμα να τα χρησιμοποιήσετε μαζί στην ίδια εφαρμογή αν χρειαστεί.
Πώς κάνω debug το Zustand store μου;
Ενεργοποιήστε το devtools middleware και χρησιμοποιήστε τα Redux DevTools extension. Μπορείτε να δείτε state changes, να κάνετε time-travel debugging, και να εξετάσετε κάθε action. Αν θέλετε κάτι πιο "mobile-friendly", δοκιμάστε το Reactotron — προσωπικά το προτιμώ για React Native debugging.
Χρειάζεται MMKV αντί για AsyncStorage;
Αν η εφαρμογή σας αποθηκεύει μικρό όγκο δεδομένων (ρυθμίσεις, tokens), το AsyncStorage δουλεύει μια χαρά. Αν όμως αποθηκεύετε μεγαλύτερα datasets, χρειάζεστε κρυπτογράφηση, ή θέλετε σύγχρονες αναγνώσεις, πηγαίνετε MMKV χωρίς δεύτερη σκέψη. Είναι ~30x ταχύτερο και προσφέρει built-in κρυπτογράφηση. Για νέα projects το 2026, το MMKV είναι η προεπιλεγμένη σύσταση.