DEV Community: Rezaul Karim

Infinite Scrolling in React Native or Expo with Zustic Query

Rezaul Karim — Mon, 09 Mar 2026 08:47:21 +0000

Infinite scrolling is one of the most common UX patterns in mobile apps. Instead of loading hundreds of records at once, we load data page by page as the user scrolls.

In this article, we'll build a reusable infinite scroll component in React Native using:

FlatList
Zustic API queries
Pagination with offset & limit
Auto cache updates

By the end, you will have a clean, reusable FlashList component that works with any API.

Tech Stack

React Native
Zustic API query system
FlatList
JSONPlaceholder API

Example API:

https://jsonplaceholder.typicode.com/posts

The Idea

We separate the logic into two queries:

Initial Query

Loads the first page.

useGetPostsQuery()

Pagination Query

Loads more data when the user scrolls.

useGetPostsByPageMutation()

Then we merge the data into cache automatically using middleware.

This keeps UI logic extremely clean.

Install the Library

Run the following command:

npm install zustic

or if you are using Yarn:

npm install zustic

Step 1 — Create a Reusable Infinite Scroll Component

We create a generic component called FlashList.

It works with any API query.

import {
  ActivityIndicator,
  FlatList,
  RefreshControl,
  Text,
  View,
} from "react-native";
import React, { useRef, useState } from "react";

export default function FlashList({
  useQuery1,
  useQuery2,
  queryParams,
  selector,
  ...extra
}) {
  const { isLoading, data, reFetch } = useQuery1({ ...queryParams });

  const [getMore, res] = useQuery2();

  const page = useRef(0);
  const hasMore = useRef(true);

  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = async () => {
    page.current = 0;
    hasMore.current = true;

    setRefreshing(true);
    await reFetch();
    setRefreshing(false);
  };

  const handleMore = () => {
    if (res?.isLoading || isLoading) return;

    if (!hasMore.current) return;

    if ((data?.data?.length || 0) < queryParams.limit) return;

    page.current += 1;

    getMore({
      ...queryParams,
      offset: queryParams.limit * page.current,
    });

    if ((res.data?.data?.length || 0) < queryParams.limit) {
        hasMore.current = false;
    }
  };

  return (
    <FlatList
      data={selector ? selector(data) : data?.data || []}
      keyExtractor={(item, index) => `${item.id}-${index}`}
      onEndReached={handleMore}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
      ListFooterComponent={
        res.isLoading ? <ActivityIndicator size="small" /> : null
      }
      ListEmptyComponent={
        isLoading ? (
          <ActivityIndicator size="large" />
        ) : (
          <Text>No Data Found</Text>
        )
      }
      {...extra}
    />
  );
}

Step 2 — Create Base Query (Fetch Wrapper)

This is a simple fetch wrapper that works like RTK Query baseQuery.

class Query {
  baseQuery = async (args) => {
    try {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com${args.url}`
      );

      if (!response.ok) throw new Error("Request failed");

      const data = await response.json();

      return { data };
    } catch (error) {
      return {
        error: {
          status: 500,
          data: { message: error.message },
        },
      };
    }
  };
}

export default new Query();

Step 3 — Create Zustic API

Now we define two endpoints.

One for initial fetch and one for pagination.

const api = createApi({
  baseQuery: query.baseQuery,
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: ({ limit, offset }) => ({
        url: `/posts?_limit=${limit}&_start=${offset}`,
      }),
    }),

    getPostsByPage: builder.mutation({
      query: ({ limit, offset }) => ({
        url: `/posts?_limit=${limit}&_start=${offset}`,
      }),

      middlewares: [
        async (ctx, next) => {
          const result = await next();

          api.utils.updateQueryData(
            "getPosts",
            { ...ctx.arg, offset: 0 },
            (draft) => {
              return [
                ...(draft || []),
                ...(result.data || []),
              ];
            }
          );

          return result;
        },
      ],
    }),
  }),
});

This middleware automatically merges new pages into existing cache.

So your UI never manually manages state.

Step 4 — Use Infinite Scroll

Now using it becomes extremely simple.

import React from "react";
import { View, Text } from "react-native";
import FlashList from "./FlashList";

export default function InfinityScrollScreen() {
  return (
    <FlashList
      queryParams={{
        limit: 10,
        offset: 0,
      }}
      useQuery1={useGetPostsQuery}
      useQuery2={useGetPostsByPageMutation}
      renderItem={({ item }) => (
        <View style={{ padding: 12 }}>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
}

Result

Now your list will:

Load first page
Load next page on scroll
Merge cache automatically
Support pull-to-refresh
Work with any endpoint

Why This Pattern is Powerful

Most infinite scroll implementations suffer from:

messy state management
duplicated arrays
pagination bugs

This pattern fixes that by:

letting Zustic handle caching
using middleware for merging
keeping UI completely clean

Your screens only care about:

renderItem

Everything else happens automatically.

Bonus Improvements

You can enhance this further:

Add:

Prefetch next page
Offline caching
Optimistic updates
retry logic
request deduplication

Final Thoughts

This architecture makes infinite scrolling:

clean
reusable
scalable

Instead of implementing pagination logic in every screen, you now have a single reusable FlashList component.

React Form State Management with Zustic

Rezaul Karim — Fri, 27 Feb 2026 08:23:13 +0000

Form State Management with Zustic

Building forms in React doesn't have to be complicated. In this guide, I'll show you how to use Zustic with a simple, elegant validation pattern that works for simple contact forms and complex multi-step forms alike.

Why This Approach?

This pattern is:

Minimal: No external validation libraries needed (but can add them if you want)
Type-safe: Full TypeScript support
Reusable: Works for any form
Flexible: Easy to extend with additional validation rules

The Pattern

The core idea is to define a Field type with metadata about each field, then build actions to update and validate fields.

type Field = {
  value: string
  error: string | null
  required?: { value: boolean; message: string }
  pattern?: { value: RegExp; message: string }
  min?: { value: number; message: string }
  max?: { value: number; message: string }
}

This gives us:

value: The field's current value
error: Any validation error message
required, pattern, min, max: Validation rules

Simple Login Form Example

Let's build a login form with email and password:

import { create } from 'zustic'
import React from 'react'

type Field = {
  value: string
  error: string | null
  required?: { value: boolean; message: string }
  pattern?: { value: RegExp; message: string }
  min?: { value: number; message: string }
  max?: { value: number; message: string }
}

type FormStore = {
  email: Field
  password: Field
  setFieldValue: (field: 'email' | 'password', value: string) => void
  validateField: (field: 'email' | 'password') => void
  handleSubmit: (cb: (data: { email: string; password: string }) => void) => (e: React.FormEvent<HTMLFormElement>) => void
}

const useForm = create<FormStore>((set, get) => ({
  email: {
    value: '',
    error: null,
    required: { value: true, message: 'Email is required' },
    pattern: {
      value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: 'Invalid email format',
    },
    min: { value: 5, message: 'Email must be at least 5 characters' },
    max: { value: 255, message: 'Email must be less than 255 characters' },
  },
  password: {
    value: '',
    error: null,
    required: { value: true, message: 'Password is required' },
    pattern: {
      value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
      message: 'Password must be at least 8 characters and contain letters and numbers',
    },
    min: { value: 8, message: 'Password must be at least 8 characters' },
    max: { value: 255, message: 'Password must be less than 255 characters' },
  },

  // Update field value
  setFieldValue: (field, value) => {
    set((state) => ({
      [field]: {
        ...state[field],
        value,
      },
    }));
  },

  // Validate a field and set error message
  validateField: (field) => {
    set((state) => {
      const fieldState = state[field]
      let error: string | null = null

      // Check required
      if (fieldState.required?.value && !fieldState.value) {
        error = fieldState.required.message
      } 
      // Check pattern
      else if (fieldState.pattern?.value && !fieldState.pattern.value.test(fieldState.value)) {
        error = fieldState.pattern.message
      } 
      // Check min length
      else if (fieldState.min && fieldState.value.length < fieldState.min.value) {
        error = fieldState.min.message
      } 
      // Check max length
      else if (fieldState.max && fieldState.value.length > fieldState.max.value) {
        error = fieldState.max.message
      } else {
        error = null
      }

      return {
        [field]: {
          ...fieldState,
          error,
        },
      }
    })
  },

  // Handle form submission
  handleSubmit: (cb)=> (e) => {
    e.preventDefault()
    get().validateField('email')
    get().validateField('password')

    const emailError = get().email.error
    const passwordError = get().password.error   

    if(!emailError && !passwordError) {
      cb({
        email: get().email.value,
        password: get().password.value,
      })
    }
  }
}))

Building the Form Component

Now let's create a reusable Controller component for form fields:

interface ControllerProps {
  field: 'email' | 'password';
  render: (value: string, error: string | null, onChange: (value: string) => void) => React.ReactNode;
}

function Controller({ field, render }: ControllerProps) {
  const state = useForm()
  const value = state[field].value
  const error = state[field].error
  const setFieldValue = state.setFieldValue
  const validateField = state.validateField

  const element = render(value, error, (value) => {
    setFieldValue(field, value)
    validateField(field)
  })
  return element
}

export default function LoginForm() {
  const handleSubmit = useForm((s)=>s.handleSubmit)

  const onSubmit = (data: { email: string; password: string }) => {
    console.log('Form submitted:', data);
    // Send to API
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller 
        field='email'
        render={(value, error, onChange) => (
          <div className='form-group'>
            <label>Email</label>
            <input 
              type="text" 
              value={value} 
              onChange={(e) => onChange(e.target.value)} 
              placeholder="your@email.com"
            />
            {error && <span className='error'>{error}</span>}
          </div>
        )}
      />

      <Controller 
        field='password'
        render={(value, error, onChange) => (
          <div className='form-group'>
            <label>Password</label>
            <input 
              type="password" 
              value={value} 
              onChange={(e) => onChange(e.target.value)}
              placeholder="••••••••"
            />
            {error && <span className='error'>{error}</span>}
          </div>
        )}
      />

      <button type="submit">Login</button>
    </form>
  )
}

Advanced: Adding More Fields

To add more fields, simply extend the pattern:

type FormStore = {
  email: Field
  password: Field
  name: Field           // Add new field
  phone: Field          // Add new field
  // ... other fields

  setFieldValue: (field: keyof FormStore, value: string) => void
  validateField: (field: keyof FormStore) => void
}

const useForm = create<FormStore>((set, get) => ({
  // ... existing fields

  name: {
    value: '',
    error: null,
    required: { value: true, message: 'Name is required' },
    min: { value: 2, message: 'Name must be at least 2 characters' },
    max: { value: 100, message: 'Name must be less than 100 characters' },
  },

  phone: {
    value: '',
    error: null,
    pattern: {
      value: /^\d{10,}$/,
      message: 'Phone must be at least 10 digits',
    },
  },

  // ... rest of store
}))

With Validation Libraries

Using Zod

import { z } from 'zod';

const emailSchema = z.string().email('Invalid email');
const passwordSchema = z.string().min(8, 'Min 8 chars').regex(/[A-Za-z]/, 'Letters required').regex(/\d/, 'Numbers required');

validateField: (field) => {
  set((state) => {
    const fieldState = state[field];
    let error: string | null = null;

    try {
      if (field === 'email') {
        emailSchema.parse(fieldState.value);
      } else if (field === 'password') {
        passwordSchema.parse(fieldState.value);
      }
    } catch (err) {
      if (err instanceof z.ZodError) {
        error = err.errors[0].message;
      }
    }

    return {
      [field]: { ...fieldState, error },
    };
  });
}

Using Yup

import * as yup from 'yup';

const emailSchema = yup.string().email('Invalid email').required();
const passwordSchema = yup.string().min(8).required();

validateField: async (field) => {
  const state = get();
  const fieldState = state[field];
  let error: string | null = null;

  try {
    if (field === 'email') {
      await emailSchema.validate(fieldState.value);
    } else if (field === 'password') {
      await passwordSchema.validate(fieldState.value);
    }
  } catch (err) {
    if (err instanceof yup.ValidationError) {
      error = err.message;
    }
  }

  set((state) => ({
    [field]: { ...state[field], error },
  }));
}

Best Practices

1. Validate on Blur

Only show errors after the user has interacted with the field:

<input 
  onBlur={() => validateField('email')}
  onChange={(e) => {
    setFieldValue('email', e.target.value);
    // Don't validate on every keystroke
  }}
/>

2. Clear Errors on Change

Clear field errors when the user starts typing:

setFieldValue: (field, value) => {
  set((state) => ({
    [field]: {
      ...state[field],
      value,
      error: null,  // Clear error on change
    },
  }));
}

3. Disable Submit While Errors Exist

<button 
  type="submit"
  disabled={useForm((s) => !!(s.email.error || s.password.error))}
>
  Login
</button>

4. Show Loading State

type FormStore = {
  // ... fields
  isSubmitting: boolean
  setIsSubmitting: (value: boolean) => void
}

// In handleSubmit
handleSubmit: (cb) => async (e) => {
  e.preventDefault()
  get().validateField('email')
  get().validateField('password')

  if(!get().email.error && !get().password.error) {
    set({ isSubmitting: true })
    try {
      await cb({
        email: get().email.value,
        password: get().password.value,
      })
    } finally {
      set({ isSubmitting: false })
    }
  }
}

Why Zustic Works Great for Forms

Lightweight - Only ~500B, won't bloat your bundle

Simple - No complex middleware setup needed

Type-safe - Full TypeScript support

Flexible - Works with any validation approach

Performant - Efficient re-renders with selectors

Familiar - Similar to other state management libraries

Conclusion

This pattern gives you everything you need for form state management:

Simple validation rules
Type-safe updates
Clean component structure
Easy to extend and customize

Start building better forms with Zustic today!

Understanding Middleware: The Power Behind State Management in zustic

Rezaul Karim — Sat, 21 Feb 2026 14:36:00 +0000

Understanding Middleware: The Power Behind State Management in zustic

Middleware is one of the most powerful but often misunderstood concepts in state management. In this post, we'll demystify middleware and show you how to use it effectively with Zustic.

What is Middleware?

Middleware is a function that intercepts state changes and can perform side effects, validations, logging, or transformations before the state is actually updated.

Think of it like a security checkpoint:

User Action → Middleware 1 → Middleware 2 → Middleware 3 → State Updated

Each middleware can inspect, validate, or modify the action before it reaches the next middleware or the state.

How Middleware Works

Middleware in Zustic follows a simple but powerful pattern. Think of it like a pipeline:

User Action → Middleware 1 → Middleware 2 → Middleware 3 → setState

Each middleware can:

See the previous state
See the update being made
Allow the update to proceed
Modify the update before it reaches the next middleware
React after the update is complete

Middleware Signature

Every middleware in Zustic follows this pattern:

type Middleware<T> = (
  set: (partial: SetStateParams<T>) => void,
  get: () => T
) => (
  next: (partial: SetStateParams<T>) => void
) => (partial: SetStateParams<T>) => void

Breaking it down:

Outer function receives set (update function) and get (state getter)
Middle function receives next (the next middleware or setState)
Inner function receives the actual update to be applied

Basic Logger Middleware

Here's the simplest middleware - a logger:

const loggerMiddleware = (set, get) => (next) => async (partial) => {
  // Log BEFORE the update
  const previousState = get();
  console.log('Previous state:', previousState);
  console.log('Update:', partial);

  // Call the next middleware/setState
  await next(partial);

  // Log AFTER the update
  console.log('New state:', get());
};

Using it:

const useStore = create(
  (set, get) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }),
  loggerMiddleware // Add middleware here
);

// Now every update is logged!
useStore.setState((state) => ({ count: state.count + 1 }));
// Logs: Previous: {count: 0}
// Logs: Update: {count: 1}
// Logs: New: {count: 1}

Using Multiple Middleware

You can chain multiple middleware together:

const useStore = create(
  (set, get) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }),
  [loggerMiddleware, persistenceMiddleware, validationMiddleware]
);

// Execution order:
// loggerMiddleware → persistenceMiddleware → validationMiddleware → setState

The order matters! Middleware execute from left to right.

Common Middleware Patterns

1. Persistence Middleware

Auto-save state to localStorage:

const persistenceMiddleware = (key: string) => (set, get) => (next) => async (partial) => {
  // Apply the update
  await next(partial);

  // Then save to localStorage
  try {
    const state = get();
    localStorage.setItem(key, JSON.stringify(state));
    console.log('💾 Saved to localStorage');
  } catch (error) {
    console.error('Failed to persist:', error);
  }
};

// Usage:
const useStore = create(
  (set, get) => {
    // Load initial state from localStorage
    const saved = localStorage.getItem('mystore');
    return {
      ...JSON.parse(saved || '{}'),
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    };
  },
  persistenceMiddleware('mystore')
);

2. Validation Middleware

Validate updates before they're applied:

const validationMiddleware = (set, get) => (next) => async (partial) => {
  const state = get();
  const updates = typeof partial === 'function' ? partial(state) : partial;

  // Validate the update
  if ('age' in updates && typeof updates.age === 'number' && updates.age < 0) {
    console.error(' Age cannot be negative!');
    return; // Reject the update
  }

  if ('email' in updates && !updates.email.includes('@')) {
    console.error(' Invalid email format!');
    return;
  }

  // Update is valid, proceed
  await next(partial);
  console.log(' Validation passed');
};

3. Time Travel / History Middleware

Store history for debugging and time-travel:

const historyMiddleware = (set, get) => {
  let history: any[] = [get()];
  let historyIndex = 0;

  // Expose time-travel functions
  if (typeof window !== 'undefined') {
    (window as any).__devtools__ = {
      undo: () => {
        if (historyIndex > 0) {
          historyIndex--;
          set(history[historyIndex]);
        }
      },
      redo: () => {
        if (historyIndex < history.length - 1) {
          historyIndex++;
          set(history[historyIndex]);
        }
      },
      getHistory: () => history,
    };
  }

  return (next) => async (partial) => {
    await next(partial);

    const newState = get();
    history = history.slice(0, historyIndex + 1);
    history.push(newState);
    historyIndex++;

    console.log(`⏱️ History: ${historyIndex}/${history.length}`);
  };
};

Use it: window.__devtools__.undo() and window.__devtools__.redo()

4. Analytics Middleware

Track user actions:

const analyticsMiddleware = (set, get) => (next) => async (partial) => {
  const state = get();
  const actionName = typeof partial === 'function' ? 'update' : Object.keys(partial)[0];

  // Send to analytics
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify({
      action: actionName,
      timestamp: Date.now(),
      previousState: state,
    }),
  });

  await next(partial);
};

5. Debounce Middleware

Debounce frequent updates (useful for search, typing, etc.):

const debounceMiddleware = (ms: number) => {
  let timeoutId: NodeJS.Timeout;

  return (set, get) => (next) => async (partial) => {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(async () => {
      await next(partial);
      console.log('⏱️ Debounced update applied');
    }, ms);
  };
};

// Usage: Wait 300ms before updating search
const useSearchStore = create(
  (set) => ({
    query: '',
    setQuery: (query: string) => set({ query }),
  }),
  debounceMiddleware(300)
);

Real-World Example

Let's combine multiple middleware for a complete user store:

type UserStore = {
  user: null | { id: number; email: string; name: string }
  isLoading: boolean
  error: null | string
  setUser: (user: any) => void
  logout: () => void
}

const useUserStore = create<UserStore>(
  (set, get) => {
    // Load persisted user
    const saved = localStorage.getItem('user');
    const initialUser = saved ? JSON.parse(saved) : null;

    return {
      user: initialUser,
      isLoading: false,
      error: null,

      setUser: (user) => set({ user }),
      logout: () => set({ user: null, error: null }),
    };
  },
  [
    // Logger first
    (set, get) => (next) => async (partial) => {
      console.log('Updating:', partial);
      await next(partial);
    },

    // Validation
    (set, get) => (next) => async (partial) => {
      const updates = typeof partial === 'function' ? partial(get()) : partial;
      if ('user' in updates && updates.user && !updates.user.email?.includes('@')) {
        console.error('Invalid email');
        return;
      }
      await next(partial);
    },

    // Persistence
    (set, get) => (next) => async (partial) => {
      await next(partial);
      if ('user' in get()) {
        localStorage.setItem('user', JSON.stringify(get().user));
      }
    },
  ]
);

Best Practices

1. Keep Middleware Pure

Middleware should not modify external state directly:

//  Good
const middleware = (set, get) => (next) => async (partial) => {
  console.log('Updating');
  await next(partial);
};

//  Bad
let counter = 0;
const badMiddleware = (set, get) => (next) => async (partial) => {
  counter++; // Side effect!
  await next(partial);
};

2. Call `next` Only Once

//  Good
const middleware = (set, get) => (next) => async (partial) => {
  console.log('Before');
  await next(partial);
  console.log('After');
};

//  Bad - causes issues
const badMiddleware = (set, get) => (next) => async (partial) => {
  await next(partial);
  set(partial); // Calls middleware again!
};

3. Order Matters

// This logs, then persists
const store1 = create(initialState, [loggerMiddleware, persistenceMiddleware]);

// This persists, then logs
const store2 = create(initialState, [persistenceMiddleware, loggerMiddleware]);

// Same middlewares, different behavior!

4. Handle Errors Gracefully

const safeMiddleware = (set, get) => (next) => async (partial) => {
  try {
    await next(partial);
  } catch (error) {
    console.error('Middleware error:', error);
    // Handle gracefully - maybe revert state
  }
};

Performance Tips

1. Keep Middleware Lightweight

Avoid heavy computations inside middleware:

//  Lightweight
const middleware = (set, get) => (next) => async (partial) => {
  console.log('Update');
  await next(partial);
};

//  Heavy computation
const heavyMiddleware = (set, get) => (next) => async (partial) => {
  const result = await runExpensiveCalculation();
  await next(partial);
};

2. Consider Conditional Middleware

const conditionalLogger = 
  process.env.NODE_ENV === 'development' 
    ? loggerMiddleware 
    : (set, get) => (next) => (partial) => next(partial);

const useStore = create(initialState, conditionalLogger);

Testing Middleware

describe('loggerMiddleware', () => {
  it('should log state changes', async () => {
    const logs: any[] = [];
    const originalLog = console.log;
    console.log = (...args) => logs.push(args);

    const useStore = create(
      (set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 })),
      }),
      (set, get) => (next) => async (partial) => {
        console.log('Updating:', partial);
        await next(partial);
      }
    );

    useStore.setState((state) => ({ count: state.count + 1 }));

    expect(logs.length).toBeGreaterThan(0);
    console.log = originalLog;
  });
});

Conclusion

Zustic middleware provides a clean, functional approach to extending state management:

Simple - Easy to understand and create
Composable - Chain multiple middleware together
Powerful - Handle logging, persistence, validation, and more
Flexible - Create custom middleware for any use case

Start using middleware to build more robust, observable, and maintainable state management!

Next Steps:

Check out the Middleware Guide for complete documentation
See Advanced Examples for complex middleware patterns
Read our Best Practices guide

A Simple & Powerful Library for React State Management in 2026 || Zustic|| Zustind || Redux || ZustJavaScript || TypeScript

Rezaul Karim — Sat, 21 Feb 2026 14:29:21 +0000

Simple State Management: Making State Easy with Zustic

State management doesn't have to be complicated. In fact, most applications don't need the complexity of Redux. Let's explore how to manage state simply and effectively with Zustic.

The State Management Journey

As React developers, we typically go through these stages:

Stage 1: useState (Simple Apps)

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

Works great for single components!

Stage 2: Prop Drilling (Growing Apps)

function App() {
  const [count, setCount] = useState(0)

  return (
    <Parent count={count} setCount={setCount}>
      <Child count={count} setCount={setCount} />
    </Parent>
  )
}

Passing props through many components gets tedious.

Stage 3: Context API (Medium Apps)

const CountContext = createContext()

function App() {
  const [count, setCount] = useState(0)

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Child />
    </CountContext.Provider>
  )
}

function Child() {
  const { count, setCount } = useContext(CountContext)
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>
}

Works, but requires providers everywhere and causes unnecessary re-renders.

Stage 4: State Management Library (Complex Apps)

This is where Zustic shines! ✨

Why Zustic is the Simplest Solution

Concept 1: Global Store

Think of your app state in one place:

import { create } from 'zustic'

// Define your store
const useCountStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

// Use anywhere - no providers!
function Counter() {
  const { count, increment, decrement } = useCountStore()

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  )
}

That's it! No providers, no context, no complexity.

Concept 2: Multiple Stores

Keep your stores organized:

// User store
const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  logout: () => set({ user: null }),
}))

// UI store
const useUIStore = create((set) => ({
  isMenuOpen: false,
  toggleMenu: () => set((state) => ({ isMenuOpen: !state.isMenuOpen })),
}))

// Cart store
const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (id) => set((state) => ({ 
    items: state.items.filter(item => item.id !== id) 
  })),
}))

// Use them independently!
function App() {
  const { user } = useUserStore()
  const { isMenuOpen } = useUIStore()
  const { items } = useCartStore()

  return (
    <div>
      <h1>Hello {user?.name}</h1>
      {isMenuOpen && <Menu />}
      <p>Cart items: {items.length}</p>
    </div>
  )
}

Concept 3: Simple State Updates

Updating state is straightforward:

const useStore = create((set) => ({
  // Initial state
  count: 0,
  user: null,
  todos: [],

  // Simple updates
  increment: () => set((state) => ({ count: state.count + 1 })),
  setUser: (user) => set({ user }),

  // Adding to array
  addTodo: (todo) => set((state) => ({
    todos: [...state.todos, todo]
  })),

  // Removing from array
  removeTodo: (id) => set((state) => ({
    todos: state.todos.filter(t => t.id !== id)
  })),

  // Complex updates
  updateTodo: (id, updates) => set((state) => ({
    todos: state.todos.map(t => 
      t.id === id ? { ...t, ...updates } : t
    )
  })),
}))

Concept 4: Accessing State Outside Components

Sometimes you need state outside React:

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

// In components
function Counter() {
  const count = useStore((state) => state.count)
  return <div>{count}</div>
}

// Outside components - use get()
useStore.setState({ count: 10 })
console.log(useStore.getState()) // { count: 10 }

Real-World Examples

Example 1: Todo App

type TodoStore = {
  todos: Array<{ id: number; text: string; done: boolean }>
  addTodo: (text: string) => void
  toggleTodo: (id: number) => void
  removeTodo: (id: number) => void
  clearDone: () => void
}

const useTodoStore = create<TodoStore>((set) => ({
  todos: [],

  addTodo: (text) => set((state) => ({
    todos: [...state.todos, {
      id: Date.now(),
      text,
      done: false,
    }]
  })),

  toggleTodo: (id) => set((state) => ({
    todos: state.todos.map(todo =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    )
  })),

  removeTodo: (id) => set((state) => ({
    todos: state.todos.filter(todo => todo.id !== id)
  })),

  clearDone: () => set((state) => ({
    todos: state.todos.filter(todo => !todo.done)
  })),
}))

// Use in component
function TodoApp() {
  const { todos, addTodo, toggleTodo, removeTodo } = useTodoStore()
  const [input, setInput] = useState('')

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add todo..."
      />
      <button onClick={() => {
        addTodo(input)
        setInput('')
      }}>
        Add
      </button>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => toggleTodo(todo.id)}
            />
            {todo.text}
            <button onClick={() => removeTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

Example 2: Authentication

type AuthStore = {
  user: null | { id: number; email: string; name: string }
  isLoading: boolean
  login: (email: string, password: string) => Promise<void>
  logout: () => void
}

const useAuthStore = create<AuthStore>((set) => ({
  user: null,
  isLoading: false,

  login: async (email, password) => {
    set({ isLoading: true })
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
      })
      const user = await response.json()
      set({ user, isLoading: false })
    } catch (error) {
      set({ isLoading: false })
      throw error
    }
  },

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

// Use in component
function LoginForm() {
  const { login, isLoading } = useAuthStore()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      await login(email, password)
      // User logged in!
    } catch (error) {
      console.error('Login failed:', error)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        type="email"
      />
      <input
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        type="password"
      />
      <button disabled={isLoading}>
        {isLoading ? 'Logging in...' : 'Login'}
      </button>
    </form>
  )
}

Key Takeaways

Simple to understand - Just JavaScript functions
No boilerplate - No actions, reducers, or providers
TypeScript friendly - Full type inference
Flexible - Works with async, nested state, arrays
Fast - Only re-renders when subscribed state changes
Powerful - Add middleware for logging, persistence, validation

State Management Decision Tree

Is your app small?
├─ Yes → useState is fine
└─ No → Zustic!

Do you need complex patterns?
├─ Yes → Zustic + middleware
└─ No → Zustic basic

Do you need enterprise features?
├─ Yes → Consider Redux (but try Zustic first!)
└─ No → Zustic!

Conclusion

State management should be simple. Zustic proves that you don't need complexity to have powerful, scalable state management. In fact, simple is better.

Start with Zustic today and enjoy:

5-minute learning curve
Zero dependencies
~500B bundle size
Perfect for teams

Get started: Zustic Installation

Found this helpful? Check out our other blog posts on middleware and React state management!

React State Management: A Complete Guide 2026 || Zustic || Context API || Redux || Zustand

Rezaul Karim — Sat, 21 Feb 2026 14:26:41 +0000

React State Management: A Complete Guide

State management is one of the most important aspects of building scalable React applications. In this guide, we'll explore different approaches to managing state in React and understand why Zustic is the perfect solution for most projects.

What is State Management?

State management is the practice of managing application data (state) in a predictable and centralized way. As your React app grows, passing props through multiple levels of components (prop drilling) becomes tedious and error-prone.

The Problem: Prop Drilling

// Without proper state management
function App() {
  const [user, setUser] = useState(null)

  return <Level1 user={user} setUser={setUser} />
}

function Level1({ user, setUser }) {
  return <Level2 user={user} setUser={setUser} />
}

function Level2({ user, setUser }) {
  return <Level3 user={user} setUser={setUser} />
}

function Level3({ user, setUser }) {
  return <div>{user?.name}</div>
}

This is prop drilling - passing props through many intermediate components just to reach the component that needs them. It's verbose and hard to maintain.

State Management Solutions

1. Context API (Built-in)

React's built-in solution using Context:

const UserContext = createContext()

export function App() {
  const [user, setUser] = useState(null)

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <YourApp />
    </UserContext.Provider>
  )
}

function MyComponent() {
  const { user } = useContext(UserContext)
  return <div>{user?.name}</div>
}

Pros: Built-in, no dependencies
Cons: Causes unnecessary re-renders, verbose, provider hell with multiple contexts

2. Redux

The most popular state management library:

// Redux Boilerplate 😩
const initialState = { user: null }

const userReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload }
    default:
      return state
  }
}

const store = createStore(userReducer)

// In component
function MyComponent() {
  const user = useSelector(state => state.user)
  const dispatch = useDispatch()

  return <div>{user?.name}</div>
}

Pros: Predictable, powerful, large ecosystem
Cons: Lots of boilerplate, steep learning curve, large bundle size (~6KB)

3. Zustand

A modern, lightweight alternative:

import { create } from 'zustand'

const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}))

function MyComponent() {
  const user = useUserStore((state) => state.user)
  const setUser = useUserStore((state) => state.setUser)

  return <div>{user?.name}</div>
}

Pros: Minimal boilerplate, small size (~2KB), simple API
Cons: Smaller ecosystem, limited middleware support

4. Zustic (The Best Choice ✨)

The simplest and smallest state management library:

import { create } from 'zustic'

type UserStore = {
  user: null | { name: string }
  setUser: (user: any) => void
}

const useUserStore = create<UserStore>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}))

function MyComponent() {
  const { user } = useUserStore()

  return <div>{user?.name}</div>
}

Pros:

Smallest size (~500B)
Zero dependencies
Simplest API
Built-in middleware
Perfect TypeScript support

Comparison Table

Feature	Context API	Redux	Zustand	Zustic
Size	0B	6KB	2KB	500B
Boilerplate	Medium	High	Low	Very Low
Learning Curve	Medium	Hard	Easy	Very Easy
Performance	Re-renders	Good	Good	Optimized
Middleware	No	Yes	Limited	Powerful
DevTools	No	Great	Limited	Built-in

When to Use Each

Use Context API: Simple app, learning React, don't need extra dependencies
Use Redux: Enterprise app, complex state, large team, need DevTools
Use Zustand: Modern app, want small bundle, simple API
Use Zustic: Most projects! Simplest API, smallest size, powerful middleware

Key Concepts in State Management

1. Single Source of Truth

All app state in one place makes it predictable and debuggable.

2. Immutability

State is never mutated directly. Always create new objects.

3. Unidirectional Data Flow

Data flows in one direction: Store → Component → User Action → Store Update

4. Middleware

Functions that intercept state changes for logging, persistence, validation, etc.

Conclusion

For most React projects, Zustic is the perfect choice:

Smallest bundle size - Only ~500B
Zero dependencies - Nothing to install
Simplest API - Learn in 5 minutes
Built-in middleware - Logging, persistence, validation
Perfect TypeScript - Full type inference
Production ready - Used in real apps

Get started: Zustic Documentation

What's your favorite state management solution? Let us know in the comments!

Zustic Query: Complete Guide to Server State Management || React, React Native,Nextjs,Typescript, Jsvascript.

Rezaul Karim — Sat, 21 Feb 2026 14:23:52 +0000

Introducing Zustic Query - a lightweight, powerful server state management library built on top of Zustic Core. If you're building React applications and tired of complex data-fetching solutions, Zustic Query offers a refreshingly simple alternative.

What is Zustic Query?

Zustic Query is a minimal yet feature-complete server state management library that handles:

Automatic HTTP requests with built-in caching
Middleware pipelines for request/response transformation
Plugin system for logging, analytics, and error tracking
Zero boilerplate - define endpoints once, get hooks automatically
Full TypeScript support with complete type inference

Why Zustic Query?

If you've used Redux Toolkit, RTK Query, or TanStack Query, you know the pain:

Complex setup with lots of boilerplate
Large bundle sizes
Steep learning curves
Unnecessary dependencies

Zustic Query is different. It's tiny (~2KB gzipped), simple, and powerful.

Feature	Zustic Query	RTK Query	TanStack Query	SWR
Bundle Size	~2KB	~15KB	~20KB	~4KB
Setup Time	5 min	30+ min	20 min	5 min
Learning Curve	Very Easy	Hard	Medium	Easy
Middleware	Built-in	Yes	No	No
Plugins	Yes	Yes	No	No
Zero Config	Yes	No	No	Yes

Getting Started in 5 Minutes

Step 1: Install

npm install zustic

Step 2: Define Your API

Create your first API with a simple configuration:

import { createApi } from 'zustic/query'

const api = createApi({
  // Custom fetch function
  baseQuery: async (params) => {
    const res = await fetch(params.url, {
      method: params.method || 'GET',
      headers: params.headers,
      body: params.body ? JSON.stringify(params.body) : undefined
    })
    return { data: await res.json() }
  },

  // Cache for 5 minutes
  cacheTimeout: 5 * 60 * 1000,

  // Define endpoints
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => ({ url: '/api/users', method: 'GET' })
    }),

    getUserById: builder.query({
      query: (id: number) => ({ url: `/api/users/${id}`, method: 'GET' })
    }),

    createUser: builder.mutation({
      query: (user: { name: string; email: string }) => ({
        url: '/api/users',
        method: 'POST',
        body: user
      })
    })
  })
})

export const {
  useGetUsersQuery,
  useGetUserByIdQuery,
  useCreateUserMutation
} = api

That's it! You now have fully typed hooks with automatic state management.

Step 3: Use in Your Components

import { useGetUsersQuery, useCreateUserMutation } from './api'

export function UsersList() {
  const { data: users, isLoading, isError } = useGetUsersQuery()
  const { mutate: createUser } = useCreateUserMutation()

  if (isLoading) return <div>Loading...</div>
  if (isError) return <div>Error loading users</div>

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users?.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  )
}

Core Features Explained

1. Intelligent Caching

Zustic Query automatically caches responses. Subsequent calls within the cache timeout return instantly:

const api = createApi({
  baseQuery: myBaseQuery,
  cacheTimeout: 5 * 60 * 1000,  // 5 minutes
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => ({ url: '/users' })
    })
  })
})

// First call: Network request
const { data: users1 } = useGetUsersQuery()

// Within 5 minutes: Instant cached response
const { data: users2 } = useGetUsersQuery()

// After 5 minutes: Fresh network request
const { data: users3 } = useGetUsersQuery()

2. Manual Refetching

Force fresh data when needed:

export function Users() {
  const { data, reFetch, isLoading } = useGetUsersQuery()

  const handleRefresh = () => {
    reFetch()  // Bypass cache, fetch fresh data
  }

  return (
    <div>
      <button onClick={handleRefresh} disabled={isLoading}>
        {isLoading ? 'Refreshing...' : 'Refresh'}
      </button>
    </div>
  )
}

3. Conditional Queries (Skip)

Only fetch when needed:

export function UserDetail({ userId }: { userId?: number }) {
  const { data: user } = useGetUserByIdQuery(userId ?? 0, {
    skip: !userId  // Don't fetch if no userId
  })

  return <div>{user?.name}</div>
}

4. Data Transformation

Transform API responses to your app format:

interface ApiUser {
  id: number
  first_name: string
  last_name: string
  created_at: string
}

interface AppUser {
  id: number
  fullName: string
  joinDate: Date
}

endpoints: (builder) => ({
  getUser: builder.query({
    query: (id) => ({ url: `/users/${id}` }),
    transformResponse: (data: ApiUser): AppUser => ({
      id: data.id,
      fullName: `${data.first_name} ${data.last_name}`,
      joinDate: new Date(data.created_at)
    })
  })
})

5. Update Query Data

Manually update cached data without refetching:

export function UpdateUserEmail() {
  const { mutate: updateUser } = useUpdateUserMutation()

  const handleSubmit = async (email: string) => {
    try {
      await updateUser({ email }).unwrap()

      // Update cache directly
      api.util.updateQueryData('getUser', { page: 1, limit: 10 }, (draft) => {
        draft = draft.map(d => ({
          ...d,
          email: email
        }))
        return draft
      })
    } catch (error) {
      console.error('Failed to update:', error)
    }
  }

  return (
    <button onClick={() => handleSubmit('new@email.com')}>
      Update Email
    </button>
  )
}

Advanced Features

Middleware for Request/Response Transformation

const authMiddleware = async (ctx, next) => {
  // Add auth token to all requests
  const result = await next()

  if (!result.data) {
    const token = localStorage.getItem('auth_token')
    if (token) {
      ctx.request.headers = {
        ...ctx.request.headers,
        Authorization: `Bearer ${token}`
      }
    }
  }

  return result
}

const api = createApi({
  baseQuery: myBaseQuery,
  middlewares: [authMiddleware],
  endpoints: (builder) => ({
    // Your endpoints
  })
})

Plugins for Side Effects

const loggingPlugin = {
  name: 'logging',

  beforeQuery: (ctx) => {
    console.log(`📤 [${ctx.def.endpoint}] Starting request`)
  },

  afterQuery: (result, ctx) => {
    console.log(`✅ [${ctx.def.endpoint}] Success`)
  },

  onError: (error, ctx) => {
    console.error(`❌ [${ctx.def.endpoint}] Error:`, error)
  }
}

const api = createApi({
  baseQuery: myBaseQuery,
  plugins: [loggingPlugin],
  endpoints: (builder) => ({
    // Your endpoints
  })
})

Automatic Retry with Exponential Backoff

const retryPlugin = {
  name: 'retry',

  onError: async (error, ctx, retry) => {
    if (ctx.retryCount < 3) {
      // Wait 1s, 2s, 4s before retry
      const delay = Math.pow(2, ctx.retryCount) * 1000
      await new Promise(r => setTimeout(r, delay))
      return retry()
    }
  }
}

Real-World Example: Todo App

Here's a complete example of a todo app using Zustic Query:

import { createApi } from 'zustic/query'

interface Todo {
  id: number
  title: string
  completed: boolean
}

const api = createApi({
  baseQuery: async (params) => {
    const res = await fetch(`https://api.example.com${params.url}`, {
      method: params.method || 'GET',
      headers: { 'Content-Type': 'application/json' },
      body: params.body ? JSON.stringify(params.body) : undefined
    })
    return { data: await res.json() }
  },

  cacheTimeout: 2 * 60 * 1000,

  endpoints: (builder) => ({
    getTodos: builder.query({
      query: () => ({ url: '/todos' })
    }),

    getTodoById: builder.query({
      query: (id: number) => ({ url: `/todos/${id}` })
    }),

    createTodo: builder.mutation({
      query: (todo: { title: string }) => ({
        url: '/todos',
        method: 'POST',
        body: todo
      })
    }),

    updateTodo: builder.mutation({
      query: (todo: Todo) => ({
        url: `/todos/${todo.id}`,
        method: 'PUT',
        body: todo
      })
    }),

    deleteTodo: builder.mutation({
      query: (id: number) => ({
        url: `/todos/${id}`,
        method: 'DELETE'
      })
    })
  })
})

export const {
  useGetTodosQuery,
  useGetTodoByIdQuery,
  useCreateTodoMutation,
  useUpdateTodoMutation,
  useDeleteTodoMutation
} = api

Use in component:

import {
  useGetTodosQuery,
  useCreateTodoMutation,
  useUpdateTodoMutation,
  useDeleteTodoMutation
} from './api'

export function TodoApp() {
  const { data: todos, reFetch } = useGetTodosQuery()
  const { mutate: createTodo } = useCreateTodoMutation()
  const { mutate: updateTodo } = useUpdateTodoMutation()
  const { mutate: deleteTodo } = useDeleteTodoMutation()

  const handleToggle = (todo: Todo) => {
    updateTodo({ ...todo, completed: !todo.completed })
  }

  const handleDelete = (id: number) => {
    deleteTodo(id)
    reFetch()  // Refresh the list
  }

  return (
    <div>
      <h1>My Todos</h1>
      {todos?.map(todo => (
        <div key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => handleToggle(todo)}
          />
          <span>{todo.title}</span>
          <button onClick={() => handleDelete(todo.id)}>Delete</button>
        </div>
      ))}
    </div>
  )
}

Best Practices

✅ DO:

Use skip option for conditional queries
Call reFetch() to manually refetch when needed
Transform responses for your app's data format
Use appropriate cacheTimeout values for your use case
Handle errors and loading states in your UI
Leverage middleware for cross-cutting concerns

❌ DON'T:

Call hooks conditionally (use skip instead)
Create API instances inside components
Forget to handle loading and error states
Pass undefined as query arguments
Ignore error states in the UI

Conclusion

Zustic Query combines the best parts of RTK Query, TanStack Query, and SWR into a tiny (~2KB), powerful package with zero configuration overhead.

Whether you're building a small side project or a large-scale application, Zustic Query gives you the tools to manage server state efficiently and elegantly.

Next Steps

Happy coding! 🚀

DEV Community: Rezaul Karim

Infinite Scrolling in React Native or Expo with Zustic Query

Tech Stack

The Idea

Install the Library

Step 1 — Create a Reusable Infinite Scroll Component

Step 2 — Create Base Query (Fetch Wrapper)

Step 3 — Create Zustic API

Step 4 — Use Infinite Scroll

Result

Why This Pattern is Powerful

Bonus Improvements

Final Thoughts

React Form State Management with Zustic

Form State Management with Zustic

Why This Approach?

The Pattern

Simple Login Form Example

Building the Form Component

Advanced: Adding More Fields

With Validation Libraries

Using Zod

Using Yup

Best Practices

1. Validate on Blur

2. Clear Errors on Change

3. Disable Submit While Errors Exist

4. Show Loading State

Why Zustic Works Great for Forms

Conclusion

Understanding Middleware: The Power Behind State Management in zustic

Understanding Middleware: The Power Behind State Management in zustic

What is Middleware?

How Middleware Works

Middleware Signature

Basic Logger Middleware

Using Multiple Middleware

Common Middleware Patterns

1. Persistence Middleware

2. Validation Middleware

3. Time Travel / History Middleware

4. Analytics Middleware

5. Debounce Middleware

Real-World Example

Best Practices

1. Keep Middleware Pure

2. Call next Only Once

3. Order Matters

4. Handle Errors Gracefully

Performance Tips

1. Keep Middleware Lightweight

2. Consider Conditional Middleware

Testing Middleware

Conclusion

A Simple & Powerful Library for React State Management in 2026 || Zustic|| Zustind || Redux || ZustJavaScript || TypeScript

Simple State Management: Making State Easy with Zustic

The State Management Journey

Stage 1: useState (Simple Apps)

Stage 2: Prop Drilling (Growing Apps)

Stage 3: Context API (Medium Apps)

Stage 4: State Management Library (Complex Apps)

Why Zustic is the Simplest Solution

Concept 1: Global Store

Concept 2: Multiple Stores

Concept 3: Simple State Updates

Concept 4: Accessing State Outside Components

Real-World Examples

Example 1: Todo App

Example 2: Authentication

Key Takeaways

State Management Decision Tree

Conclusion

React State Management: A Complete Guide 2026 || Zustic || Context API || Redux || Zustand

React State Management: A Complete Guide

What is State Management?

The Problem: Prop Drilling

State Management Solutions

1. Context API (Built-in)

2. Redux

3. Zustand

2. Call `next` Only Once