DEV Community: hichem ben chaabene

Zombie State in Pinia: A Silent Bug You Might Already Have

hichem ben chaabene — Fri, 19 Dec 2025 22:02:32 +0000

Pinia is one of the best state management libraries in the Vue ecosystem.
It’s simple, type-safe, and feels natural with the Composition API.

But there’s a subtle problem many teams run into — often without realizing it.

That problem is zombie state.

What Is Zombie State?

Zombie state is state that should no longer exist, but is still alive and affecting your app.

It usually comes from:

A previous page
An old user flow
A completed form
A finished async request

Yet it continues to:

Prefill inputs
Trigger validation
Affect UI decisions
Cause "random" bugs

It doesn’t crash your app.
It just quietly causes confusion.

Why Zombie State Happens in Pinia

Pinia stores are:

Global
Long-lived
Singletons by default

This means one important thing:

Navigation away doesn't reset store data

Unless you explicitly reset it, the state stays in memory — even when it no longer makes sense.

A Very Common Example

// useWizardStore.ts
export const useWizardStore = defineStore('wizard', () => {
  const step = ref(2)
  const email = ref('old@email.com')

  return { step, email }
})

What happens

1- user opens the wizard
2- fills some steps
3- navigates away
4- comes back later

The wizard:

Starts on step 2
Shows the old email
Fails validation unexpectedly

The store never reset, that's the zombie state.

Async Zombie State (Even Trickier)

Zombie state can also come from async code.

async function loadUser() {
  user.value = await fetchUser()
}

Scenario:
1- User opens page A
2- Request starts
3- User navigates to page B
4- Request from Page A finishes late

Result:
Page B shows data from page A

This is zombie state caused by a late async response.

How Zombie State Shows Up in Real Apps

You might recognize these symptoms:

Forms already filled when they shouldn’t be
Validation errors on first render
Wrong data after navigation
UI behaving differently after back/forward
Bugs that disappear on refresh

These are some of the hardest bugs to debug — because they depend on history, not just current state.

The Key Question to Ask

Whenever you create a store, ask:

Who owns this state, and when should it be destroyed?

If the answer isn’t clear, zombie state is likely.

How to Prevent Zombie State in Pinia

1- Add an explicit reset

The simplest and most effective solution

export const useWizardStore = defineStore('wizard', () => {
  const step = ref(1)
  const email = ref('')

  function reset() {
    step.value = 1
    email.value = ''
  }

  return { step, email, reset }
})

Use it when the flow ends

onUnmounted(() => store.reset())

Pinia doesn’t reset state for you — you have to be intentional.

2- Reset on context changes
if state depends on route parameters, reset when they change.

watch(
  () => route.params.id,
  () => store.reset()
)

This prevents old data from leaking into new contexts.

3- Guard Async Requests

A small guard can prevent async zombie state.

let requestId = 0

async function load() {
  const id = ++requestId
  const data = await fetchData()

  if (id !== requestId) return
  state.value = data
}

Late responses are ignored instead of overwriting valid state.

4- Separate UI State from Domain State

UI state often becomes zombie state.

Good candidates for stores

-User data
-Orders
-Permissions

Bad candidates
-Input values
-Modal visibility
-Hover or focus state

Keep short-lived UI state close to the component when possible.

Zombie State vs Stale State

They’re not the same.

Type	Meaning
Stale state	Old but still valid
Zombie state	Invalid but still active

Zombie state is dangerous because it looks correct — until it isn’t.

A Simple Rule of Thumb

If state outlives its owner, it becomes a zombie.

Once you start thinking about state ownership and lifecycle, many “random” bugs suddenly make sense.

Final Thoughts

Zombie state isn’t a Pinia problem.
It’s a state lifecycle problem.

Pinia gives us powerful tools — but with that power comes responsibility:

Define ownership
Control lifetime
Reset intentionally

Doing this consistently leads to apps that are:

Easier to reason about
Easier to debug
More predictable for users

If this helps even one developer avoid a hard-to-trace production bug, it’s worth sharing.

How to add typescript types to a pinia options store 🍍

hichem ben chaabene — Sun, 11 Feb 2024 13:59:55 +0000

import { _GettersTree, defineStore } from 'pinia';

interface Todo {
  todo: string;
}

interface State {
  count: number;
  todos: Todo[];
}

interface Actions {
  addTodo: (todo: Todo) => void;
  increment: () => void;
  resetState: () => void;
}

interface Getters extends _GettersTree<State> {
  getCount: () => number;
  getTodos: () => Todo[];
}

export const useMyStore = defineStore<string, State, Getters, Actions>({
  id: 'todo',
  state: () => ({
    count: 0,
    todos: [],
  }),
  getters: {
    getCount() {
      return this.count;
    },
    getTodos() {
      return this.todos;
    },
  },
  actions: {
    increment() {
      this.count++;
    },
    addTodo(todo) {
      this.todos.push(todo);
    },
    resetState() {
      this.count = 0;
      this.todos = [];
    },
  },
});

TypeScript Type Narrowing: A Comprehensive Guide 🤖

hichem ben chaabene — Wed, 20 Dec 2023 01:20:16 +0000

TypeScript provides a powerful feature called "type narrowing" that allows you to make your code more precise by narrowing down the type of a variable within a certain block of code.

This feature helps you write safer and more maintainable code by leveraging TypeScript's static type checking.

In this article, we'll explore the basics of type narrowing and gradually delve into more advanced scenarios.

Basic type narrowing

typeof Narrowing

function printMessage(message: string | number) {
  if (typeof message === 'string') {
    // Within this block, TypeScript knows that `message`
    // is a string
    console.log(message.toUpperCase());
  } else {
    // Here, TypeScript knows that `message` is a number
    console.log(message.toFixed(2));
  }
}

printMessage('Hello'); // Output: HELLO
printMessage(42);      // Output: 42.00

User-Defined Type Guards aka ( T : is K )

interface Cat {
  type: 'cat';
  meow(): void;
}

interface Dog {
  type: 'dog';
  bark(): void;
}

function isCat(animal: Cat | Dog): animal is Cat {
  return animal.type === 'cat';
}

function handleAnimal(animal: Cat | Dog) {
  if (isCat(animal)) {
    // TypeScript now knows that `animal` is a Cat
    animal.meow();
  } else {
    // TypeScript knows that `animal` is a Dog
    animal.bark();
  }
}

Discriminated Unions Aka additional prop:value

This sounds a bit sophisticated but it's very simple.

type Circle = { kind: 'circle', radius: number }
type Rectangle = { kind: 'rectangle'; width: number; height: number };
type Shape = Circle | Rectangle;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      // TypeScript knows `shape` is a circle here
      return Math.PI * Math.pow(shape.radius, 2);
    case 'rectangle':
      // TypeScript knows `shape` is a rectangle here
      return shape.width * shape.height;
  }
}

Here by adding the attribute kind we are telling typescript
what type we are expecting.

don't get intimidated by this one, in real life apps this can be one of these like
__type__: something or __typename if you are familiar with graphql

instance of type guard

class Car {
  drive() {
    console.log('Vroom!');
  }
}

class Bike {
  ride() {
    console.log('Ring ring!');
  }
}

function handleVehicle(vehicle: Car | Bike) {
  if (vehicle instanceof Car) {
    // TypeScript knows now `vehicle` is an instance of Car
    vehicle.drive();
  } else {
    // TypeScript knows `vehicle` is an instance of Bike
    vehicle.ride();
  }
}

is type guard

interface Fish {
  swim(): void;
}

interface Bird {
  fly(): void;
}

function isFishOrBird(pet: Fish | Bird): pet is Fish {
  return 'swim' in pet;
}

function handlePet(pet: Fish | Bird) {
  if (isFishOrBird(pet)) {
    // TypeScript knows `pet` is a Fish
    pet.swim();
  } else {
    // TypeScript knows `pet` is a Bird
    pet.fly();
  }
}

Bonus the extends utility

In contrast of type narrowing and how we can use it to tell
typescript how to understand our types.
There are instances we want to use generics

// Base type with a timestamp property
type TimestampedObject = {
  timestamp: Date;
};

// Generic function that works with timestamped objects
// by telling typescript T needs to be an object that has a
// timestamp property where timestamp is a Date type
function processTimestampedObject<T extends TimestampedObject>(obj: T): void {
  // Access the timestamp property safely
  const timestamp: Date = obj.timestamp;

  // Perform some processing with the timestamp
  console.log(`Processing timestamp: ${timestamp.toISOString()}`);
}

Now if you try to run the previous code

// This works fine because the timestamp property is a Date
const validObject: TimestampedObject = { timestamp: new Date() };
processTimestampedObject(validObject);

// This would cause a TypeScript error without using `extends`
const invalidObject: TimestampedObject = { timestamp: '2022-01-01' };
processTimestampedObject(invalidObject);

Conclusion

Incorporating these techniques into your codebase will lead to safer and more predictable TypeScript applications.

Also checkout

10 typescript utilities you need to know

If you find this useful please hit the 👍 button
Cheers

Vue 3 - inifinite scroll using intersection observer with composables, pinia and Typescript 🍍

hichem ben chaabene — Mon, 18 Dec 2023 20:27:33 +0000

Composables are typically functions or objects designed to be reusable across components with composition Api.
They are a way to encapsulate and distribute pieces of logic.

In this article, i'm going to share an implementation of a real life application use case of composables such as infinite scroll where typically we want to load more items when the user scroll down in the view.

Also please ignore the css, html and services as these you can do on your own and my specific example isn't necessary something i want to cover here.

The final code:

- useIsInView.ts [comopsable]
- infiniteScroll.vue [component]
- movies.vue [component]
- useMovies.ts [pinia store]

// useIsInView.ts
import { ref, onMounted } from 'vue'
import type { Ref } from 'vue'

interface IntersectionObserverOptions {
  root: Element | Document | null
  rootMargin: string
  threshold: number | number[]
  trackVisibility: boolean
  delay: number
}

const defaultOptions: IntersectionObserverOptions = {
  root: null,
  rootMargin: '0px',
  threshold: 0,
  trackVisibility: false,
  delay: 0
}

export function useIsInView(
  elementRef: Ref<HTMLElement | Element>,
  options: Partial<IntersectionObserverOptions> = defaultOptions
) {
  const isInView = ref<boolean>(false)

  function handleIntersection(entries: IntersectionObserverEntry[]) {
    const intersecting = entries[0].isIntersecting
    isInView.value = intersecting
  }

  onMounted(() => {
    const observer = new IntersectionObserver(handleIntersection, {
      ...defaultOptions,
      ...options
    })
    observer.observe(elementRef.value)
  })
  return {
    isInView
  }
}

Pinia store

// useMovies.ts
import { ref, MaybeRef } from 'vue'
import { defineStore } from 'pinia'
import { fetchMovie } from '@/services/tmdb'
import type { MoviesList } from '@/services/tmbd'

export const useMoviesStore = defineStore('movies', () => {
  const page = ref<number>(1)
  const movies = ref<MabyeRef<MoviesList>>(null)
  const isLoading = ref<boolean>(false)
  const error = ref<any>(null)

  function nextPage() {
    page.value++
    fetchMovies()
  }

  function setMovies(data: unknown) {
    movies.value = movies.value.concat(data.results)
  }

  function setLoading(loading: boolean) {
    isLoading.value = loading
  }

  async function fetchMovies(): Promise<void> {
    try {
      setLoading(true)
      const data = await fetchMovie('movie', { page: page.value })
      setMovies(data)
    } catch (error) {
      // handle your error
    } finally {
      setLoading(false)
    }
  }
  return { nextPage, movies, fetchMovies, isLoading, error }
})

// movies component
<script setup lang="ts">
import { onMounted, toRefs } from 'vue'
import { useMoviesStore } from '@/stores/movies'
import Movie from '@/components/Movie.vue'
import infiniteScroll from '@/components/InfiniteScroll.vue'

const { movies } = toRefs(useMoviesStore())

onMounted(async () => {
  await useMoviesStore().fetchMovies()
})

const fetchNexPage = () => {
  if (movies.value && movies.value.length > 0) {
    useMoviesStore().nextPage()
  }
}
</script>

<template>
  <div>
    <div v-for="movie in movies" :key="movie.id">
      <movie :movie="movie" />
    </div>
    <infinite-scroll @in-view="fetchNexPage"></infinite-scroll>
  </div>
</template>

InifiniteScroll.vue

<script setup lang="ts">
import { MaybeRef, ref, watch } from 'vue'
import { useIsInView } from '@/composables/useIsInView'

const infiniteScroll = ref<MaybeRef<Element>>(null)
const emit = defineEmits(['in-view'])
const { isInView } = useIsInView(infiniteScroll)

watch(isInView, (newValue) => {
  if (newValue) {
    emit('in-view')
  }
})
</script>

<template>
  <div ref="infiniteScroll"></div>
</template>

Automatically register and load vue routes 🔥 (vue 2-3)

hichem ben chaabene — Sun, 17 Dec 2023 18:29:22 +0000

in the routes folder you can create a route loader file to automatically load routes then add them to the route registration of the app

// routeLoader.[js,ts]
import { RouteConfig } from 'vue-router';

export default function loadRoutes(): RouteConfig[] {
  const routes: RouteConfig[] = [];
  const requireRoutes = require.context(
    './routes',
    true,
    /^(?!.*test).*\.(js|ts)$/is,
  );

  requireRoutes.keys().forEach((fileName) => {
    const module = requireRoutes(fileName);
    const route = module.default || module;

    routes.push({
      ...(route as RouteConfig),
    });
  });

  return routes;
}

In the route registration, assign loadRoutes to routes,
this will also work for nested routes

// routes/index.[ts|js]

import Vue from 'vue';
import VueRouter from 'vue-router';
import loadRoutes from './routeLoader';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: loadRoutes(),
});

export default router;

Single route definition

import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

// Nested route definition
import NestedRoutes from './nestedRoutes';

const routes: RouteConfig[] = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/about',
    component: About,
    children: NestedRoutes,
  },
];

export default routes;

10 Typescript utilities you need to know 🔥

hichem ben chaabene — Wed, 13 Dec 2023 01:57:17 +0000

In this article, i'm going to cover 10 typescript utilities every developer should know.

Partial type
Required type
Readonly
Pick
Omit
Record
Exclude
Extract
NonNullable
Return type

1- Partial type

Type Person = {
  name: string;
  age: number;
  gender: string;
  address: string;
}
// Partial<T> type Partial sets all properties 
// of Person to optional
type PartialPerson = Partial<Person>;

2-Required

// Required<T> all properties of `RequiredPerson` 
// are required
type RequiredPerson = Required<Person>;

3-Readonly

// Readonly<T>: Creates a type with all properties
// of T set to readonly.
type ReadonlyPerson = Readonly<Person>;

4-Pick

// Creates a type by picking only the specified
// properties K from T.
type PersonName = Pick<Person, 'name'>;

5-Omit

// Omit<T,K> Creates a type by omitting the specified
// properties K from T.
type PersonWithoutAge = Omit<Person, 'age'>;

6-Record

// Record<K,T> Creates a type with keys of type 
// K and values of type T.
type StringRecord = Record<string, Person>;

7-Exclude

// Exclude<T, U>: Creates a type by excluding all types
// from T that are assignable to U.
// string is excluded from the union type
type NumbersOnly = Exclude<number | string, string>;

8-Extract

// Extract<T, U> Creates a type by extracting all types
// from T that are assignable to U.
// string is extract from the union type
type StringOnly = Extract<number | string, string>;

9-NonNullable

// NonNullable<T>: Creates a type by removing null and undefined from T.
// null and undefined are excluded from the union type
type NonNullString = NonNullable<string | null | undefined>;

10-ReturnType

// ReturnType<T>: Obtains the return type of a function type.
type MyFunctionReturnType = ReturnType<MyFunction>;