React Native State Management Guide (2026)

Varför state management fortfarande spelar roll 2026

Okej, vi behöver prata om state management i React Native. Igen. Jag vet — det känns som att vi har den här diskussionen varje år, men landskapet har faktiskt förändrats ganska rejält. Redux dominerade länge (och det var inte alltid kul att jobba med, ska erkännas), men 2026 ser det helt annorlunda ut. Handskriven Redux har sjunkit till ungefär 10% av nya projekt, medan Zustand har vuxit med över 30% årligen och dyker nu upp i runt 40% av alla nya React-projekt. Och TanStack Query (som vi gamla kallade React Query) — det hanterar serverdata i uppskattningsvis 80% av projekt som behöver datahämtning.

Den viktigaste insikten? Du behöver inte ett enda verktyg som gör allt. Sluta leta efter den magiska lösningen.

Den moderna approachen handlar om att välja rätt verktyg för rätt typ av state. Client state — UI-tillstånd, användarpreferenser, formulärdata och liknande — hanteras bäst av Zustand. Server state — API-data, cachning och synkronisering — det är TanStack Querys hemmaplan.

I den här guiden kör vi igenom hela stacken från installation till offline-stöd, med kodexempel du faktiskt kan använda i dina projekt. Vi utgår från Zustand v5 och TanStack Query v5, de senaste versionerna i februari 2026.

Förstå de olika typerna av state

Innan du kastar dig på verktygen behöver du förstå vilken typ av state du faktiskt har att göra med. Det finns tre huvudkategorier:

Lokalt state — tillstånd som lever i en enskild komponent, typ om en dropdown är öppen eller stängd. Här räcker useState och useReducer gott och väl. Krångla inte till det.
Globalt client state — tillstånd som delas mellan flera komponenter men som inte kommer från en server. Autentiseringsstatus, temainställningar, kundvagnens innehåll. Det här är Zustand-territorium.
Server state — data som hämtas från ett API och som kan vara föråldrad, behöver cachning, synkronisering och felhantering. Det här är exakt vad TanStack Query är byggt för.

Det vanligaste misstaget jag ser (och ja, jag har gjort det själv) är att stoppa allt i en enda global store. Det fungerar i början, men efter ett par månader har du en gigantisk Redux-store med onödiga omrenderingar, komplex kod och buggar som är nästan omöjliga att spåra. Genom att separera client state och server state får du en arkitektur som faktiskt går att förstå, testa och underhålla.

Zustand v5: modern client state-hantering

Installation och grundläggande setup

Zustand (det är tyska för "tillstånd", om du undrade) är ett minimalistiskt state management-bibliotek som väger in på bara cirka 3 KB minifierat och gzippat. Tre kilobyte! Det kräver inga providers, inga reducers och i princip ingen boilerplate. Installationen är precis så enkel som du hoppas:

npm install zustand
# eller
yarn add zustand

Skapa din första store

En Zustand-store skapas med funktionen create och returnerar en hook som du kan använda var som helst i dina komponenter — helt utan att wrappa appen i en Provider. Första gången jag såg det trodde jag nästan att jag missade något steg.

// stores/useAuthStore.ts
import { create } from 'zustand';

interface User {
  id: string;
  name: string;
  email: string;
}

interface AuthState {
  user: User | null;
  isAuthenticated: boolean;
  token: string | null;
  login: (user: User, token: string) => void;
  logout: () => void;
  updateProfile: (updates: Partial<User>) => void;
}

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  isAuthenticated: false,
  token: null,

  login: (user, token) =>
    set({
      user,
      isAuthenticated: true,
      token,
    }),

  logout: () =>
    set({
      user: null,
      isAuthenticated: false,
      token: null,
    }),

  updateProfile: (updates) =>
    set((state) => ({
      user: state.user ? { ...state.user, ...updates } : null,
    })),
}));

Använda store i komponenter

Nu kan du använda hooken i vilken komponent som helst. Det fina är att Zustand bara renderar om komponenter som prenumererar på state som faktiskt har ändrats — inte allt och alla:

// screens/ProfileScreen.tsx
import { View, Text, Pressable } from 'react-native';
import { useAuthStore } from '../stores/useAuthStore';

export function ProfileScreen() {
  // Prenumerera bara på det du behöver
  const user = useAuthStore((state) => state.user);
  const logout = useAuthStore((state) => state.logout);

  if (!user) return null;

  return (
    <View>
      <Text>{user.name}</Text>
      <Text>{user.email}</Text>
      <Pressable onPress={logout}>
        <Text>Logga ut</Text>
      </Pressable>
    </View>
  );
}

Selectors och useShallow i Zustand v5

I v5 har hanteringen av selectors blivit smidigare. När du behöver hämta flera värden från din store utan att trigga onödiga omrenderingar, använd useShallow:

import { useShallow } from 'zustand/shallow';
import { useAuthStore } from '../stores/useAuthStore';

function Header() {
  // useShallow gör en ytlig jämförelse istället för strikt referensjämförelse
  const { user, isAuthenticated } = useAuthStore(
    useShallow((state) => ({
      user: state.user,
      isAuthenticated: state.isAuthenticated,
    }))
  );

  return (
    <View>
      {isAuthenticated ? (
        <Text>Välkommen, {user?.name}!</Text>
      ) : (
        <Text>Logga in</Text>
      )}
    </View>
  );
}

Persistent state med AsyncStorage

I mobilappar vill du nästan alltid spara visst state mellan app-sessioner. Tänk temainställningar eller språkval — ingen vill behöva ställa in det varje gång de öppnar appen. Zustand har inbyggt stöd för det via middleware, och det funkar riktigt bra:

// 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' | 'system';
  language: string;
  notificationsEnabled: boolean;
  setTheme: (theme: 'light' | 'dark' | 'system') => void;
  setLanguage: (language: string) => void;
  toggleNotifications: () => void;
}

export const useSettingsStore = create<SettingsState>()(
  persist(
    (set) => ({
      theme: 'system',
      language: 'sv',
      notificationsEnabled: true,

      setTheme: (theme) => set({ theme }),
      setLanguage: (language) => set({ language }),
      toggleNotifications: () =>
        set((state) => ({
          notificationsEnabled: !state.notificationsEnabled,
        })),
    }),
    {
      name: 'app-settings',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

Store-slices för större appar

I större applikationer kan en enda stor store bli svårhanterlig. (Fråga mig hur jag vet.) Zustand stöder ett slice-mönster där du delar upp din store i moduler — ungefär som du kanske gjort med Redux-slices, fast med betydligt mindre ceremony:

// stores/slices/cartSlice.ts
import { StateCreator } from 'zustand';

export interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

export interface CartSlice {
  items: CartItem[];
  addItem: (item: Omit<CartItem, 'quantity'>) => void;
  removeItem: (id: string) => void;
  clearCart: () => void;
  totalPrice: () => number;
}

export const createCartSlice: StateCreator<CartSlice> = (set, get) => ({
  items: [],

  addItem: (item) =>
    set((state) => {
      const existing = state.items.find((i) => i.id === item.id);
      if (existing) {
        return {
          items: state.items.map((i) =>
            i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
          ),
        };
      }
      return { items: [...state.items, { ...item, quantity: 1 }] };
    }),

  removeItem: (id) =>
    set((state) => ({
      items: state.items.filter((i) => i.id !== id),
    })),

  clearCart: () => set({ items: [] }),

  totalPrice: () =>
    get().items.reduce((sum, item) => sum + item.price * item.quantity, 0),
});

// stores/useAppStore.ts
import { create } from 'zustand';
import { CartSlice, createCartSlice } from './slices/cartSlice';

// Kombinera slices till en gemensam store
type AppStore = CartSlice; // Lägg till fler slices med &

export const useAppStore = create<AppStore>()((...args) => ({
  ...createCartSlice(...args),
}));

TanStack Query v5: serverdata som bara fungerar

Installation och konfiguration

TanStack Query v5 (version 5.90 i februari 2026) tar hand om allt som har med serverdata att göra: datahämtning, cachning, bakgrundsuppdateringar, paginering, felhantering — grejer som du verkligen inte vill bygga själv. Installera det:

npm install @tanstack/react-query
# eller
yarn add @tanstack/react-query

Konfigurera QueryClient och wrappa din app. Notera att TanStack Query, till skillnad från Zustand, faktiskt kräver en Provider:

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minuter
      gcTime: 1000 * 60 * 30, // 30 minuter
      retry: 2,
      refetchOnWindowFocus: false, // Viktigt för React Native
      refetchOnReconnect: true,
    },
  },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Dina navigatorer och screens */}
    </QueryClientProvider>
  );
}

Grundläggande queries

TanStack Query bygger på konceptet query keys — unika nycklar som identifierar varje query och styr cachningen. Det är en enkel idé, men den gör en enorm skillnad i praktiken:

// hooks/queries/useProducts.ts
import { useQuery } from '@tanstack/react-query';

interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  imageUrl: string;
}

async function fetchProducts(category?: string): Promise<Product[]> {
  const url = category
    ? `https://api.example.com/products?category=${category}`
    : 'https://api.example.com/products';

  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Kunde inte hämta produkter');
  }
  return response.json();
}

export function useProducts(category?: string) {
  return useQuery({
    queryKey: ['products', { category }],
    queryFn: () => fetchProducts(category),
  });
}

Att använda hooken i en komponent är rakt på sak. Inget konstigt här:

// screens/ProductListScreen.tsx
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import { useProducts } from '../hooks/queries/useProducts';

export function ProductListScreen() {
  const { data: products, isLoading, error, refetch } = useProducts();

  if (isLoading) {
    return <ActivityIndicator size="large" />;
  }

  if (error) {
    return (
      <View>
        <Text>Något gick fel: {error.message}</Text>
        <Pressable onPress={() => refetch()}>
          <Text>Försök igen</Text>
        </Pressable>
      </View>
    );
  }

  return (
    <FlatList
      data={products}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.name}</Text>
          <Text>{item.price} kr</Text>
        </View>
      )}
    />
  );
}

Mutations: skapa, uppdatera och ta bort data

Mutations hanterar alla skriv-operationer mot ditt API. Det här är där det börjar bli riktigt intressant — speciellt med optimistisk uppdatering. Grundtanken: visa förändringen för användaren direkt, och rulla tillbaka om servern inte håller med.

// hooks/mutations/useCreateProduct.ts
import { useMutation, useQueryClient } from '@tanstack/react-query';

interface CreateProductInput {
  name: string;
  price: number;
  category: string;
}

async function createProduct(input: CreateProductInput) {
  const response = await fetch('https://api.example.com/products', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(input),
  });
  if (!response.ok) {
    throw new Error('Kunde inte skapa produkt');
  }
  return response.json();
}

export function useCreateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: createProduct,

    // Optimistisk uppdatering: visa den nya produkten direkt
    onMutate: async (newProduct) => {
      // Avbryt pågående hämtningar
      await queryClient.cancelQueries({ queryKey: ['products'] });

      // Spara tidigare state
      const previousProducts = queryClient.getQueryData(['products']);

      // Lägg till den nya produkten optimistiskt
      queryClient.setQueryData(['products'], (old: any[]) => [
        ...(old || []),
        { id: 'temp-id', ...newProduct },
      ]);

      return { previousProducts };
    },

    // Återställ vid fel
    onError: (_error, _variables, context) => {
      if (context?.previousProducts) {
        queryClient.setQueryData(['products'], context.previousProducts);
      }
    },

    // Synka med servern oavsett resultat
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] });
    },
  });
}

Query key factory-mönstret

Något jag inte uppskattade tillräckligt i början: att hålla ordning på query keys. I en liten app spelar det kanske ingen roll, men så fort du har mer än en handfull endpoints börjar det bli rörigt. Ett factory-mönster gör det enklare att invalidera rätt data vid rätt tillfälle:

// queryKeys.ts
export const productKeys = {
  all: ['products'] as const,
  lists: () => [...productKeys.all, 'list'] as const,
  list: (filters: Record<string, unknown>) =>
    [...productKeys.lists(), filters] as const,
  details: () => [...productKeys.all, 'detail'] as const,
  detail: (id: string) => [...productKeys.details(), id] as const,
};

export const userKeys = {
  all: ['users'] as const,
  current: () => [...userKeys.all, 'current'] as const,
  detail: (id: string) => [...userKeys.all, 'detail', id] as const,
};

// Användning:
// useQuery({ queryKey: productKeys.list({ category: 'electronics' }), ... })
// queryClient.invalidateQueries({ queryKey: productKeys.all })

Kombinera Zustand och TanStack Query i praktiken

Projektstruktur

Så här brukar jag strukturera en React Native-app med Zustand och TanStack Query. Det är ingen universell sanning, men det har funkat bra i flera projekt:

src/
  stores/              # Zustand stores (client state)
    useAuthStore.ts
    useSettingsStore.ts
    slices/
      cartSlice.ts
      uiSlice.ts
  hooks/
    queries/           # TanStack Query hooks (server state)
      useProducts.ts
      useOrders.ts
      useUserProfile.ts
    mutations/         # Mutation hooks
      useCreateOrder.ts
      useUpdateProfile.ts
  lib/
    queryClient.ts     # QueryClient-konfiguration
    queryKeys.ts       # Query key factories
    api.ts             # API-klient

Autentisering: Zustand + TanStack Query tillsammans

Det vanligaste scenariot där de två verktygen behöver samarbeta är autentisering. Zustand håller i token och autentiseringsstatus (det är ren client state), medan TanStack Query sköter API-anropen som kräver den tokenen. Det är en ren och naturlig uppdelning:

// lib/api.ts
import { useAuthStore } from '../stores/useAuthStore';

export async function authenticatedFetch(
  url: string,
  options: RequestInit = {}
) {
  const token = useAuthStore.getState().token;

  const response = await fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      'Content-Type': 'application/json',
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
    },
  });

  // Hantera 401 genom att logga ut
  if (response.status === 401) {
    useAuthStore.getState().logout();
    throw new Error('Sessionen har gått ut');
  }

  if (!response.ok) {
    throw new Error(`API-fel: ${response.status}`);
  }

  return response.json();
}

// hooks/queries/useUserProfile.ts
import { useQuery } from '@tanstack/react-query';
import { authenticatedFetch } from '../../lib/api';
import { useAuthStore } from '../../stores/useAuthStore';
import { userKeys } from '../../lib/queryKeys';

export function useUserProfile() {
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);

  return useQuery({
    queryKey: userKeys.current(),
    queryFn: () => authenticatedFetch('https://api.example.com/me'),
    enabled: isAuthenticated, // Hämta bara om inloggad
  });
}

Kundvagn med lokal state + server-synk

Ett annat mönster jag gillar: kundvagnen sparas lokalt i Zustand för att ge snabb respons (ingen vill vänta på ett API-anrop bara för att lägga till en vara), men synkroniseras med servern via TanStack Query i bakgrunden:

// hooks/mutations/useSyncCart.ts
import { useMutation } from '@tanstack/react-query';
import { useAppStore } from '../../stores/useAppStore';
import { authenticatedFetch } from '../../lib/api';

export function useSyncCart() {
  return useMutation({
    mutationFn: async () => {
      const items = useAppStore.getState().items;
      return authenticatedFetch('https://api.example.com/cart/sync', {
        method: 'PUT',
        body: JSON.stringify({ items }),
      });
    },
  });
}

Offline-stöd med TanStack Query

Mobilappar måste fungera även utan internetuppkoppling. Det låter kanske självklart, men det förbises förvånansvärt ofta. TanStack Query har riktigt bra stöd för offline-funktionalitet genom persistens och nätverkshantering.

Konfigurera nätverksövervakning

I webbläsaren hanterar TanStack Query nätverksstatus automatiskt. Men i React Native? Nej, där behöver du sätta upp det manuellt med NetInfo. Det är ett extra steg, men det är inte speciellt krångligt:

npm install @react-native-community/netinfo @tanstack/react-query-persist-client @tanstack/query-async-storage-persister @react-native-async-storage/async-storage

// lib/queryClient.ts
import { QueryClient, onlineManager } from '@tanstack/react-query';
import NetInfo from '@react-native-community/netinfo';

// Koppla TanStack Querys nätverksstatus till enheten
onlineManager.setEventListener((setOnline) => {
  return NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected);
  });
});

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5,
      gcTime: 1000 * 60 * 60 * 24, // 24 timmar för offline-stöd
      retry: 2,
      refetchOnReconnect: true,
    },
    mutations: {
      retry: 3, // Försök igen vid nätverksfel
    },
  },
});

Persistera cache till AsyncStorage

För att queries ska överleva app-omstarter behöver du persistera cachen. Det här är grejen som gör att användare kan öppna appen i tunnelbanan och ändå se sina senaste data:

// App.tsx
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { queryClient } from './lib/queryClient';

const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
  key: 'REACT_QUERY_CACHE',
});

export default function App() {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{
        persister: asyncStoragePersister,
        maxAge: 1000 * 60 * 60 * 24, // 24 timmar
      }}
    >
      {/* Dina navigatorer och screens */}
    </PersistQueryClientProvider>
  );
}

Med den här konfigurationen kan användare öppna appen offline och fortfarande se cachad data. När enheten ansluter igen synkroniseras allt automatiskt. Inte illa, eller hur?

Zustand vs Redux: behöver du fortfarande Redux?

Den eviga frågan. Mitt ärliga svar: för de allra flesta projekt — nej, det gör du inte. Men det beror förstås på kontexten.

Egenskap	Zustand	Redux Toolkit
Paketstorlek	~3 KB	~30 KB
Boilerplate	Minimal	Måttlig (reducerad med RTK)
Inlärningskurva	Låg	Medel-Hög
DevTools	Stöds	Fullt stöd
Middleware	Grundläggande	Omfattande (Thunk, Saga)
TypeScript	Utmärkt	Bra
Provider krävs	Nej	Ja
Bäst för	Små-medelstora appar	Stora enterprise-appar

Min rekommendation: För de allra flesta React Native-projekt 2026 ger Zustand + TanStack Query allt du behöver. Redux Toolkit är fortfarande ett solitt val för stora enterprise-applikationer med komplexa tillståndsflöden och team med 10+ utvecklare som behöver strikt struktur. Men om du startar ett nytt projekt idag och teamet inte redan kan Redux? Spara er tiden.

Prestandatips för state management i React Native

Undvik onödiga omrenderingar

Det absolut viktigaste prestandatipset: prenumerera bara på det state du faktiskt behöver. Det här enda tricket kan göra mer för din apps prestanda än timmar av annan optimering.

// Dåligt: prenumererar på hela storen
const store = useAuthStore();
// Varje ändring i hela storen orsakar omrendering

// Bra: prenumerera bara på det du behöver
const userName = useAuthStore((state) => state.user?.name);
// Omrenderas bara när user.name ändras

Optimera TanStack Query

Några inställningar som gör skillnad i praktiken:

staleTime — sätt ett rimligt värde (5-15 minuter) så att data inte hämtas om i onödan varje gång användaren navigerar mellan skärmar. Default är 0, vilket nästan aldrig är vad du vill ha.
refetchOnWindowFocus: false — i React Native är detta viktigt. "Window focus"-konceptet beter sig helt annorlunda än i webbläsaren, och utan den här inställningen kan du få oväntade refetches.
placeholderData — visa platshållardata medan den riktiga hämtningen pågår. Det gör att appen känns snabbare, även om den faktiska laddningstiden är densamma.
select — transformera data i selectors så att komponenter bara renderas om när den transformerade datan faktiskt ändras

// Optimerad query med select
export function useProductNames(category: string) {
  return useQuery({
    queryKey: productKeys.list({ category }),
    queryFn: () => fetchProducts(category),
    staleTime: 1000 * 60 * 10, // 10 minuter
    select: (products) => products.map((p) => p.name),
    // Komponenten renderas bara om listan av namn ändras,
    // inte vid varje hämtning
  });
}

Vanliga misstag och hur du undviker dem

Jag har sett (och begått) alla de här misstagen. Lär av andras smärta:

Stoppa serverdata i Zustand — använd TanStack Query istället. Seriöst. Du slipper hantera cachning, laddningstillstånd och felhantering manuellt, och det är kod du inte vill skriva själv.
Glömma nätverkshantering i React Native — TanStack Query behöver onlineManager konfigurerat med NetInfo, annars fungerar inte refetch-on-reconnect. Det är lätt att missa, men det märks direkt i produktion.
Stora selectors — om du hämtar hela state-objektet istället för specifika fält, går du miste om Zustand:s finkorniga omrenderingsoptimering. Det är som att köpa en sportvagn och bara köra i ettan.
Saknad staleTime — utan staleTime (standard 0) hämtar TanStack Query data på nytt varje gång en komponent mountas. Resultatet? Onödig nätverkstrafik och flimmer i UI:t.
Blanda client och server state — håll dem separerade. Zustand för det som lever i appen, TanStack Query för det som kommer från servern. Punkt.

FAQ — Vanliga frågor om React Native state management

Vilken state management bör jag använda i React Native 2026?

Det beror helt på vilken typ av state du hanterar. För globalt client state (autentisering, UI-inställningar, temadata) rekommenderar jag Zustand. För server state (API-data, cachning, synkronisering) är TanStack Query den givna lösningen. De flesta appar behöver faktiskt båda. Undvik att använda ett enda verktyg för allt — separera client state och server state, så får du en arkitektur som håller i längden.

Behöver jag fortfarande Redux med React Native?

För de allra flesta nya projekt 2026? Nej. Zustand + TanStack Query täcker nästan alla användningsfall med mindre kod och bättre prestanda. Redux Toolkit är dock fortfarande relevant om du jobbar med stora enterprise-applikationer, har ett stort team som behöver strikt arkitektur, eller redan sitter på en stor Redux-kodbas (och att migrera bort vore opraktiskt).

Hur hanterar jag offline-stöd med TanStack Query i React Native?

Installera @react-native-community/netinfo och koppla det till TanStack Querys onlineManager. Använd sedan @tanstack/react-query-persist-client tillsammans med @tanstack/query-async-storage-persister för att spara cachen i AsyncStorage. Data persisteras automatiskt mellan app-sessioner, och mutations köas tills enheten ansluter igen. Det finns kodexempel längre upp i artikeln.

Kan jag använda Zustand utan Provider i React Native?

Ja! Det är ärligt talat en av de saker som sålde mig på Zustand från början. Till skillnad från Redux och React Context kräver Zustand ingen Provider-komponent. Du skapar en store med create() och använder den returnerade hooken direkt i vilken komponent som helst. TanStack Query kräver dock fortfarande en QueryClientProvider högst upp i komponentträdet — men det är ju bara en rad kod, så det är inte hela världen.

Hur synkroniserar jag Zustand-state med TanStack Query?

Det vanligaste mönstret är att använda Zustand:s getState() för att hämta client state (till exempel en auth-token) inifrån TanStack Query:s query-funktioner. Du kan också använda enabled-flaggan i queries för att villkora datahämtning baserat på Zustand-state — exempelvis att bara hämta data om användaren är inloggad. Vi visade ett konkret exempel på det här mönstret i autentiserings-sektionen ovan.