Resetting store clears localstorage but does not re-render app

[hirvesh]

Hello @jmeistrich - it's me again!

I have a particular situation where for e.g. if I have set the initial state to an empty object for e.g. {} and if I do state$.reset() it will will delete everything from my localstorage but the app itself will not re-render and clear up. If I do a full page reload, it will then clear of course.

The behaviour does not happen if I have a non-empty initial object. It then resets to the default value set in the initial object no problem. Is this the expected behaviour? 🤔

This is my example code below. If initialCategories is an empty object initially and I populate it with different categories and try to reset state, it will clear localstorage but will not re-render my component. If initialCategories has a default value like in the example below, it will reset to that state and re-render the component to display the initial hard-coded state.

'use client'

import { observable, syncState } from '@legendapp/state'
import { syncObservable, synced } from '@legendapp/state/sync'
import { StorageEngine } from './storageEngine/storageEngine'
import { profile$ } from './profile'
import { uuidv7 } from 'uuidv7'
import { z } from 'zod'

export const CategorySchema = z.object({
  uid: z.string(),
  userId: z.string(),
  name: z.string().min(1, 'Name is required').max(20, 'Name must be less than 20 characters'),
  icon: z.string(),
  createdAt: z.number(),
  updatedAt: z.number(),
  deleted: z.boolean().default(false),
})

export type Category = z.infer<typeof CategorySchema>

interface CategoryRecord {
  [key: string]: Category
}

const initialCategories: CategoryRecord = {
  '01940670-e312-7fd1-bb87-27c5e6ebb4fb': {
    uid: '01940670-e312-7fd1-bb87-27c5e6ebb4fb',
    userId: profile$.uid.get(),
    name: 'Art',
    icon: 'Inspiration',
    createdAt: Date.now(),
    updatedAt: Date.now(),
    deleted: false,
  }
}

export const categories$ = observable<CategoryRecord>(
  synced({
    initial: initialCategories,
    persist: {
      name: 'categories',
      plugin: StorageEngine,
      retrySync: true,
    },
  })
)

export const categoriesState$ = syncState(categories$)

[jmeistrich]

Hmm, I'm testing this and can't find a problem with the initial value being {}. Is it happening in the latest version? If so is it possible to share a repro I can test with? Thanks!

[FelipeFlamarini]

Hey, I got this issue as well with 3.0.0-beta.31. Here's my Expo test page:

Expo test page

import { observable, syncState } from "@legendapp/state";
import { synced } from "@legendapp/state/sync";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { observablePersistAsyncStorage } from "@legendapp/state/persist-plugins/async-storage";
import { Alert, ScrollView, Text, TextInput, TouchableOpacity, View } from "react-native";
import { use$ } from "@legendapp/state/react";
import { useState } from "react";

type Todo = {
  id: string;
  text: string;
  completed: boolean;
  createdAt: number;
};

const todos$ = observable<Record<string, Todo>>(
  synced({
    initial: {},
    persist: {
      name: "testTodos",
      plugin: observablePersistAsyncStorage({
        AsyncStorage,
      }),
    },
  }),
);

const todosState$ = syncState(todos$);

export default function SyncedObservableTestScreen() {
  const [newTodoText, setNewTodoText] = useState("");
  const todos = use$(() => Object.values(todos$.get()));

  const addTodo = () => {
    if (newTodoText.trim() === "") {
      Alert.alert("Error", "Please enter a todo text");
      return;
    }

    const newId = Date.now().toString();

    const newTodo: Todo = {
      id: Date.now().toString(),
      text: newTodoText.trim(),
      completed: false,
      createdAt: Date.now(),
    };

    todos$[newId].set(newTodo);
    setNewTodoText("");
  };

  const deleteTodo = (id: string) => {
    todos$[id].delete();
  };

  const toggleTodo = (id: string) => {
    todos$[id].completed.toggle();
  };

  const resetState = () => {
    Alert.alert("Reset State", "This will reset the state to empty array. Continue?", [
      { text: "Cancel", style: "cancel" },
      {
        text: "Reset",
        style: "destructive",
        onPress: () => {
          void todosState$.reset();
        },
      },
    ]);
  };

  const isPersistLoaded = use$(todosState$.isPersistLoaded);
  const isLoaded = use$(todosState$.isLoaded);
  const error = use$(todosState$.error);

  return (
    <ScrollView style={{ flex: 1, backgroundColor: "#f5f5f5" }}>
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 24, fontWeight: "bold", marginBottom: 20, textAlign: "center" }}>
          Synced Observable Test
        </Text>

        <View style={{ backgroundColor: "white", padding: 15, borderRadius: 8, marginBottom: 20 }}>
          <Text style={{ fontSize: 18, fontWeight: "bold", marginBottom: 10 }}>Status</Text>
          <Text>Persist Loaded: {isPersistLoaded ? "✅" : "❌"}</Text>
          <Text>Is Loaded: {isLoaded ? "✅" : "❌"}</Text>
          <Text>Error: {error ? `❌ ${error.message}` : "✅ None"}</Text>
          <Text>Total Todos: {todos.length}</Text>
        </View>

        <View style={{ backgroundColor: "white", padding: 15, borderRadius: 8, marginBottom: 20 }}>
          <Text style={{ fontSize: 18, fontWeight: "bold", marginBottom: 10 }}>Add New Todo</Text>
          <TextInput
            style={{
              borderWidth: 1,
              borderColor: "#ddd",
              padding: 10,
              borderRadius: 5,
              marginBottom: 10,
              fontSize: 16,
            }}
            placeholder="Enter todo text..."
            value={newTodoText}
            onChangeText={setNewTodoText}
            onSubmitEditing={addTodo}
          />
          <TouchableOpacity
            onPress={addTodo}
            style={{
              backgroundColor: "#007AFF",
              padding: 12,
              borderRadius: 5,
              alignItems: "center",
            }}>
            <Text style={{ color: "white", fontSize: 16, fontWeight: "bold" }}>Add Todo</Text>
          </TouchableOpacity>
        </View>

        <View style={{ backgroundColor: "white", padding: 15, borderRadius: 8, marginBottom: 20 }}>
          <Text style={{ fontSize: 18, fontWeight: "bold", marginBottom: 10 }}>Controls</Text>

          <TouchableOpacity
            onPress={resetState}
            style={{
              backgroundColor: "#FF9500",
              padding: 12,
              borderRadius: 5,
              alignItems: "center",
              marginBottom: 10,
            }}>
            <Text style={{ color: "white", fontSize: 16, fontWeight: "bold" }}>
              Reset State (todosState$.reset())
            </Text>
          </TouchableOpacity>
        </View>

        <View style={{ backgroundColor: "white", padding: 15, borderRadius: 8 }}>
          <Text style={{ fontSize: 18, fontWeight: "bold", marginBottom: 10 }}>
            Todos ({todos.length})
          </Text>

          {todos.length === 0 ? (
            <Text style={{ color: "#666", fontStyle: "italic", textAlign: "center", padding: 20 }}>
              No todos yet. Add one above!
            </Text>
          ) : (
            todos.map((todo, index) => (
              <View
                key={todo.id}
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  padding: 10,
                  borderBottomWidth: index < todos.length - 1 ? 1 : 0,
                  borderBottomColor: "#eee",
                }}>
                <TouchableOpacity
                  onPress={() => toggleTodo(todo.id)}
                  style={{
                    width: 24,
                    height: 24,
                    borderRadius: 12,
                    backgroundColor: todo.completed ? "#34C759" : "#ddd",
                    alignItems: "center",
                    justifyContent: "center",
                    marginRight: 10,
                  }}>
                  {todo.completed && (
                    <Text style={{ color: "white", fontSize: 16, fontWeight: "bold" }}>✓</Text>
                  )}
                </TouchableOpacity>

                <View style={{ flex: 1 }}>
                  <Text
                    style={{
                      fontSize: 16,
                      textDecorationLine: todo.completed ? "line-through" : "none",
                      color: todo.completed ? "#666" : "#000",
                    }}>
                    {todo.text}
                  </Text>
                  <Text style={{ fontSize: 12, color: "#999" }}>
                    Created: {new Date(todo.createdAt).toLocaleString()}
                  </Text>
                </View>

                <TouchableOpacity
                  onPress={() => deleteTodo(todo.id)}
                  style={{
                    backgroundColor: "#FF3B30",
                    paddingHorizontal: 12,
                    paddingVertical: 6,
                    borderRadius: 4,
                    marginLeft: 10,
                  }}>
                  <Text style={{ color: "white", fontSize: 12, fontWeight: "bold" }}>Delete</Text>
                </TouchableOpacity>
              </View>
            ))
          )}
        </View>

        <View style={{ backgroundColor: "#f0f0f0", padding: 15, borderRadius: 8, marginTop: 20 }}>
          <Text style={{ fontSize: 16, fontWeight: "bold", marginBottom: 10 }}>Debug Info</Text>
          <Text style={{ fontFamily: "monospace", fontSize: 12 }}>
            Observable Value: {JSON.stringify(todos, null, 2)}
          </Text>
        </View>
      </View>
    </ScrollView>
  );
}

If I remove the initial property from the synced observable:

const todos$ = observable<Record<string, Todo>>(
  synced({
    persist: {
      name: "testTodos",
      plugin: observablePersistAsyncStorage({
        AsyncStorage,
      }),
    },
  }),
);

And avoid getting getting undefined from todos$.get():

const todos = use$(() => Object.values(todos$.get() || {}));

Then reset works as expected.

[FelipeFlamarini]

I opened #571 fixing that