[Bug] removeItem will break useMMKVStorage hook

[mydesweb]

Describe the bug
I just try to remove one item for a given key but after running removeItem method all other item keys are removed. This is not happening immediately, only after the app is restarted.

To Reproduce

import {MMKVLoader} from 'react-native-mmkv-storage';

const settings = new MMKVLoader().withInstanceID('settings').initialize();

settings.setString('oneKey', 'stringValue');

settings.setInt('anotherKey', 1);

settings.removeItem('anotherKey');

To Reproduce
Steps to reproduce the behavior:

1. run settings.removeItem('anotherKey')
2. remove the app from background / kill the app
3. open the app and check other items, they are just gone..

Expected behavior
Only one item should be removed

Platform Information:

• OS: Android Emulator
• React Native Version 0.68
• Library Version 0.7.3

Additional context
If I don't run removeItem everything is working as expected.

[ammarahm-ed]

@mydesweb Let me check. Did this happen when you were debugging with chrome?

[mydesweb]

@ammarahm-ed I don't use any debugger, just running my code in DEV mode on Android device & Emulator, I manage to reproduce this issue each time..

[ammarahm-ed]

@mydesweb I have tested on android emulator and a real device. I am doing same as what you told me and I cannot reproduce this.

On clicking a button in app:

  console.log(storage.getString('oneKey'), storage.getInt('anotherKey')); // Check values.
        storage.setString('oneKey', 'stringValue');

        storage.setInt('anotherKey', 1);

        storage.removeItem('anotherKey');

oneKey is always there on restart/relaunch when i click the button.

[mydesweb]

@ammarahm-ed you are right, I omitted something, checked again my code and you have to obtain oneKey value in a Component by using useMMKVStorage hook .

const [oneKey] = useMMKVStorage('oneKey', settings, false);
console.log('oneKey ', oneKey);

at this point oneKey will always be false (no need to restart the app)

[mydesweb]

basically after using removeItem the useMMKVStorage is broken.

[ammarahm-ed]

@mydesweb So you are saying that after removing a value from storage and restarting the app, all useMMKVStorage hooks return default/null values?

And without using useMMKVStorage hook, everything works normally

[mydesweb]

@ammarahm-ed yes, this is the case. you don't have to restart the app if the hook is consumed only after the key is removed. If you call the hook first and after you remove the value you have to restart the app or call again the hook.

[ammarahm-ed]

@mydesweb So all values are there but the hook is not updated? Your initial issue was that all values from storage are removed/deleted? Is that still true or no?

[mydesweb]

@ammarahm-ed the hook will start to return undefined or defaultValue if is set for other keys wich are not removed. If it still not clear I will provide a complete code in few hours.

[ammarahm-ed]

@mydesweb An example would be helpful.

[mydesweb]

@ammarahm-ed please run the code below. Certainly we will not consume the MMKV this way but wanted to keep code simple.

import {MMKVLoader, useMMKVStorage} from 'react-native-mmkv-storage';
const storage = new MMKVLoader().withInstanceID('settings').initialize();

storage.setString('key_1', 'value_1');
storage.setInt('key_2', 2);
storage.removeItem('key_2'); // let's say we no longer need this key

export default function App() {
  const [reactive_key_1] = useMMKVStorage('key_1', storage);
  const [reactive_key_2] = useMMKVStorage('key_2', storage);
  const [reactive_key_3] = useMMKVStorage('key_3', storage); // this key doesn't exist

  const key_1 = storage.getString('key_1');
  const key_2 = storage.getInt('key_2');
  const key_3 = storage.getString('key_3'); // this key doesn't exist

  // issue #1 - why reactive_key_1 is becoming undefined?
  console.log(`key_1: ${key_1} - reactive_key_1: ${reactive_key_1}`); // key_1: value_1 - reactive_key_1: undefined

  // issue #2 - why we have two different default values for same key?
  console.log(`key_2: ${key_2} - reactive_key_2: ${reactive_key_2}`); // key_2: null - reactive_key_2: undefined

  // issue #2 - why we have two different default values for same key?
  console.log(`key_3: ${key_3} - reactive_key_3: ${reactive_key_3}`); // key_3: null - reactive_key_3: undefined

  return null;
}

[ammarahm-ed]

@mydesweb I think I found the bug. Will fix this asap

[ammarahm-ed]

All fixed in v0.7.4