Question about deleting a property in a store and how to trigger an effect on deletion

[JaielZeus]

Hello, this is a two part question that may be linked together and can be resolved at once.

So I have some utility function to create a store object and to save it on localStorage.

export function createObject<T extends object>(id: string, initial: T, validator: (object: T) => boolean = () => true): [T, SetStoreFunction<T>] {
  let value = initial;

  if (localStorage[id] !== undefined) {
    const object = stringToJSON(localStorage[id], value);
    value = isObject(object) && validator(object) ? object : value;
  } else {
    localStorage[id] = stringFromJSON(value);
  }

  const [object, setObject] = createStore(value);

  createEffect(() => {
    localStorage[id] = stringFromJSON({ ...object });
  });

  return [object, setObject];
}

As you might see I am registering an effect to trigger the save mechanism of the object when it is altered via

  createEffect(() => {
    localStorage[id] = stringFromJSON({ ...object });
  });

This works well when I alter any values in the store.

__

But it does not get triggered seemingly when I delete a value in the store.

For example like so:

export function deletePropertyById(id) {
  setObject((state) => { delete state[id]; return state; });
}

Any possibility to trigger my effect when deleting a value from the store?

Part 2 of the question:

Is that even the correct way to delete somethign from the store

setStore((state) => { delete state[id]; return state; });

I am getting typescript errors when trying to do

setStore(id, undefined); // Argument of type 'undefined' is not assignable to parameter of type 'StoreSetter<string[], [any]>'

Edit:

For the time being to solve problem 1 I am using this now instead of effect, although it gives me a typescript error for the spread operation:

...
  const [object, _setObject] = createStore(value);

  function setObject(...args) {
    _setObject(...args); // A spread argument must either have a tuple type or be passed to a rest parameter.
    localStorage[id] = stringFromJSON({ ...object });
  }

  // createEffect(() => {
  //   localStorage[id] = stringFromJSON({ ...object });
  // });

  return [object, setObject];

[snnsnn]

You are mutating the stored object and setting it back, so it should not trigger an update because change is not perceived as update. Try setting a new object:

setStore(({id, ...rest }) => rest);

[IgneousRed]

If the stored data is an array, Is it only detecting a change when the reference to the array is changed?

If I want to change an element of the array, is the only way to make the array re-render in by making a new one?